Вопрос по html, vertical-alignment, css – Вертикальное выравнивание CSS не работает с плавающей точкой

66

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

Я пытаюсь сделать следующее: если вы удалите 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
}

JSFiddle

Ваш Ответ

3   ответа
81

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

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

Не работает для<button> элементы. Вместо<span> это<button>.
Этот ответ неверен. Вертикальное выравнивание принадлежит КОНТЕЙНЕРУ (div) не отдельные элементы. Правильное решение - способное к вертикальному выравниванию плавающих элементов - это поставить обаvertical-align а такжеline-height на КОНТЕЙНЕР:<div style="border: 1px solid red; vertical-align:middle; line-height: 38px;">, УДАЛИТЬvertical-align:middle; line-height: 38px; из стилей span.
Просто обнаружил, что то, что я предлагаю, работает для плавающих промежутков в скрипте ответа, но не для некоторых элементов (не удалось для плавающего радиовхода).
если вы установитеline-height с одинаковым значением для всех элементовvertical-align бесполезно. (jsfiddle.net/VBR5J/448)
это помогло мне. Спасибо за чаевые
15

Отредактировано:

vertical-align Свойство CSS определяет вертикальное выравнивание элемента inline, inline-block или table-cell.

Прочитайте эту статью дляUnderstanding vertical-align

Обновлено. Я пропустил это. Спасибо за упоминание.
Это относится кinline-block элементы тоже.
8

Вертикальное выравнивание на самом деле не работает с плавающими элементами. Это потому, что float выводит элемент из нормального потока документа. Возможно, вы захотите использовать другие методы вертикального выравнивания, такие как методы, основанные на преобразовании, отображении: таблица, абсолютное позиционирование, высота строки, 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; 
}

Не уверен, зачем вам нужна фиксированная ширина, дисплей: встроенный блок и плавающий.

Не могли бы вы добавить код к своему ответу, чтобы показать, как достичь решения?
вопрос сказал: «ему нужен float: прямо на последнем элементе», поэтому ему может понадобиться, чтобы последний элемент находился вдоль правой стороны контейнера. как достичь этой цели в своем ответе?
Кроме того, «правильный ответ» это так легко сломать ... это заставляет меня задаться вопросом, как на земле 19 человек проголосовали за это.
Да, прочитайте его реальный код и отредактируйте мой ответ. Спасибо ! :)
Хороший ответ и, кроме того, так ясно! Просто отсутствует опция Flexbox.

Похожие вопросы