Каким образом выравнить изображение по центру по вертикали и горизонтали без использования CSS3? Я сделал с использованием text-align: center
и margin-top: 10px;
, но не считаю этот вариант правильным, так как постоянно гадать какой margin-top
прописать, чтобы изображение встало по центру — не вариант.
Чистый код, без выравнивания:
.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/
Код с выравниванием, считаю, что не совсем правильно использовать text-align: center
и 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>