CSS Вертикальное выравнивание не работает с float
Как я могу использовать vertical-align и float в свойствах div? Вертикальное выравнивание работает нормально, если я не использую float. Но если я использую float, то он не работает. Для меня важно использовать float:right для последнего div.
Если убрать float из всех div'ов, то все будет работать нормально:
<div class="wrap">
<div class="left">First div, float left, has more text.</div>
<div class="left2">Second div, float left </div>
<div class="right">Third div, float right</div>
</div>CSS:
.wrap{
width: 500px;
overflow:hidden;
background: pink;
}
.left {
width: 150px;
margin-right: 10px;
background: yellow;
float:left;
vertical-align: middle;
display:inline-block
}
.left2 {
width: 150px;
margin-right: 10px;
background: aqua;
float:left;
vertical-align: middle;
display:inline-block
}
.right{
width: 150px;
background: orange;
float:right;
vertical-align: middle;
display:inline-block
}
Вам необходимо установить высоту строки.
<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>
Отредактировано:
Свойство CSS vertical-align определяет вертикальное выравнивание элемента inline, inline-block или table-cell.
Читайте эту статью для Понимание вертикального выравнивания.
Вертикальное выравнивание не работает с плавающими элементами. Это происходит потому, что float вырывает элемент из нормального потока документа. Вы можете использовать другие методы вертикального выравнивания, например, основанные на transform, display: table, абсолютном позиционировании, line-height, js (в крайнем случае) или даже обычную старую html-таблицу (возможно, первый выбор, если содержимое действительно табличное). Вы обнаружите, что по этому вопросу ведутся жаркие дебаты.
Тем не менее, вот как вы можете вертикально выровнять ВАШИ 3 div:
.wrap{
width: 500px;
overflow:hidden;
background: pink;
}
.left {
width: 150px;
margin-right: 10px;
background: yellow;
display:inline-block;
vertical-align: middle;
}
.left2 {
width: 150px;
margin-right: 10px;
background: aqua;
display:inline-block;
vertical-align: middle;
}
.right{
width: 150px;
background: orange;
display:inline-block;
vertical-align: middle;
}Не совсем понятно, зачем вам понадобилась фиксированная ширина, display: inline-block и плавающая.
