CSS вертикальное выравнивание не работает с float

Question

CSS вертикальное выравнивание не работает с float

как я могу использовать vertical-align а также float на div свойства? Элемент vertical-align отлично работает, если я не использую float. Но если я использую поплавок, то он не работает. Это важно для меня, чтобы использовать float:right для последнего div.

Я пытаюсь следовать, если вы удалите поплавок из всех 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

}

JSFiddle

686 3

html css vertical-alignment

3 ответов:

Comments

Ничего не найдено.

Anders B · Accepted Answer · 2013-06-14 10:26:50

вам нужно установить высоту строки.

<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>

http://jsfiddle.net/VBR5J/

Ahsan Khurshid · Accepted Answer · 2017-11-07 07:55:52

редактировать:

The вертикальный-выровняйте свойство CSS определяет вертикальное выравнивание встроенного, встроенного блока или элемента ячейки таблицы.

в этой статье понимание вертикального выравнивания

Gabriel · Accepted Answer · 2015-04-10 15:12:13

вертикальное выравнивание не работает с плавающими элементами, действительно. Это потому, что float поднимает элемент из нормального потока документа. Вы можете использовать другие методы вертикального выравнивания, например, основанные на transform, display: table, absolute positioning, line-height, js (в крайнем случае, возможно) или даже простую старую таблицу html (возможно, первый выбор, если содержимое на самом деле табличное). Вы увидите, что есть горячие дебаты по этому вопросу.

однако, это это как вы можете вертикально выровнять ваши 3 ДИВС:
.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; 
}
Не уверен, почему вам нужны как фиксированная ширина, дисплей: встроенный блок и плавающий.