Способы выравнивания элементов по вертикали
2015-10-19
Михаил Ведерников
Элементы с известной высотой
- Родительский блок с заданной высотой
- Элемент, который необходимо выровнять: top: 50%; margin-top: - 50% от высоты элемента
Элементы с неизвестной высотой
- Родительский блок: display: table; width:100%;
- Элемент, который необходимо выровнять: display: table-cell; vertical-align: middle;
Иконка слева, текст справа с переносом текста и применение background-position: 0 50%
HTML
<div class="elem">
<span class="icon"></span>
<span class="text">adminadminadmin@gmail.ru</span>
</div>
CSS
.elem{
position: relative;
}
.text{
display: block;
word-wrap: break-word;
margin-left: 40px;
}
.icon{
height: 100%;
position: absolute;
display: inline-block;
font: normal normal normal 14px/1 YourFont;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon:before{
height: 100%;
background-position: 0 50%;
display: inline-block;
content: '';
background-repeat: no-repeat;
width: 24px;
background-image: url('');
}
Иконка с текстом
HTML
<div class="wrapper">
<div class="block">
<span class="icon"></span>
Текст
<span class="icon"></span>
</div>
</div>
CSS
.wrapper{
width: 100%;
display: table;
height: 200px;
text-align: center;
}
.block{
display: table-cell;
vertical-align: middle;
}
.icon{
vertical-align: middle;
display: inline-block;
font: normal normal normal 14px/1 YourFont;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon:before{
display: inline-block;
content: '';
width: 24px;
height: 18px;
background-image: url("");
}
добавьте свой комментарий