How to align icon inserted with :before method?


Tags: html,css

Problem :

How can I vertically align icon inserted using :before method?

Here is what I have:

<div class="button submit">
  <a class="submit check_car_search" href="#" >Some Text</a>
</div>

CSS:

.button a{
    background: none;
    background-color: #32BBE7;
    text-indent:1px;
    color:#FFF;
    text-decoration: none;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    height: auto;
    padding: 10px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 50px;
    font-style: italic;
}

.button a:hover{
    background-color: #2597F0;
}


.button a:before {
    content:url(http://i.stack.imgur.com/tKsDb.png);
    position: relative
}

JSFiddle: https://jsfiddle.net/1z83tc1o/

How Can I align vertically icon relative to the text?



Solution :

You can use background and set is size (width, height), Then you can use vertical-align.

CSS

.button a:before {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 16px;
    vertical-align: middle;
    content:"";
    background: transparent url(http://i.stack.imgur.com/tKsDb.png) no-repeat center center;
    margin-right: 20px; // Optional

}

DEMO HERE


    CSS Howto..

    How to use CSS to create the left - right alignment so the left div does not push the right div

    How do I add a special CSS class to run only on IE for a div component?

    How to rotate a div

    How can I disable inherit in CSS?

    How to link a css file with the Slim templating engine?

    how to Put a img and text middle of a div

    How to get custom css to load after richfaces?

    How to make the search form without the search button?

    How to turn off visjs active shadow box?

    How to apply an active state to a CSS sprite?

    how to create a pricetag like border around list items

    Third-Level Menu Items Are Always Showing

    How to create and apply CSS to javascript Alert

    How to style unordered lists in CSS as comma separated text

    CSS - How to apply box-shadow to a image rounded

    how to only load one IFRAME using @media and display:none; CSS

    How is text thickness calculated according to css property “font-weight”?

    How do I set image src based on li active status?

    How to correctly redefine the CSS settings for FireFox?

    How the licensed web font is getting rendered?

    How to create 'greater than' arrow using CSS only?

    How to apply CSS rotate transition around glyph's vertical middle or centerpoint

    How to Center Text in a JavaScript Function?

    how to apply css class condtionally in angularjs

    How can one pass component property values to the css/less clientlibs for that component? AEM 6.2

    How can I fix this 3-column layout?

    How can I turn the page's font color to green when a button is clicked

    How can I control when my css transitions happen and when they don't?

    How to make all input boxes ordered in a straight line? [closed]

    How to give Internet Explorer different CSS lines?