How to align the image in the center vertically and horizontally without using CSS3 ? I made using text-align: center and margin-top: 10px; , but I don’t consider this option to be correct, as it’s always a matter of guessing what margin-top prescribe for the image to be centered is not an option.

Clean code, not aligned:

 .icons { background: url('http://uxen.ru/images/css-sprite-combined.png?1') no-repeat; } .icons.plus { display: inline-block; background-position: -0px 0px; width: 10px; height: 10px; } .button_wrap { display: inline-block; width: 30px; height: 30px; background: #65d1e0; font-size: 0; cursor: pointer; } .button_wrap .button { } 
 <div class="button_wrap"> <div class="button"> <div class="icons plus"></div> </div> </div>

https://jsfiddle.net/g3mxLLm7/1/

Code with alignment, I think that it’s not quite right to use text-align: center and margin-top: 10px; :

 .icons { background: url('http://uxen.ru/images/css-sprite-combined.png?1') no-repeat; } .icons.plus { display: inline-block; background-position: -0px 0px; width: 10px; height: 10px; } .button_wrap { display: inline-block; width: 30px; height: 30px; background: #65d1e0; font-size: 0; cursor: pointer; } .button_wrap .button { text-align: center; margin-top: 10px; } 
 <div class="button_wrap"> <div class="button"> <div class="icons plus"></div> </div> </div>

https://jsfiddle.net/g3mxLLm7/2/

    1 answer 1

    There can come to the aid of the good old display: table; and display: table-cell;

    The class .button-wrap set display: table; , and the button itself, that is, the .button class, .button set to display: table-cell; , text-align: center; and vertical-align: middle; .

    Also, there is still a good and convenient service that helps to solve the problem of centering the elements given the old versions of the IE browser.

    Using the above, we apply and look at the result:

     .icons { background: url('http://uxen.ru/images/css-sprite-combined.png?1') no-repeat; } .icons.plus { display: inline-block; background-position: -0px 0px; width: 10px; height: 10px; } .button_wrap { display: table; width: 30px; height: 30px; background: #65d1e0; font-size: 0; cursor: pointer; } .button_wrap .button { display: table-cell; vertical-align: middle; text-align: center; } 
     <div class="button_wrap"> <div class="button"> <div class="icons plus"></div> </div> </div>