Вопрос по html, css – Как я могу вертикально выровнять два плавающих div?

9

У меня есть два div внутри контейнера div. Один должен плавать влево, другой - вправо. Они также должны быть вертикально центрированы внутри своего родителя. Как мне этого добиться?

<div id='parent'>
    <div id='left-box' class='child'>Some text</div>
    <div id='right-box' class='child'>Details</div>    
</div>

Если поплавок не применен ни к одному из них, они вертикально выровнены по центру с этим CSS

.child{ display:inline-block; vertical-align:middle; }

Однако добавление#right-box{ float: right; } заставляет детей терять свое вертикальное положение. Что я делаю неправильно?

Спасибо, парни

ваш код не работает для вертикального выравнивания по центруonline demo on dabblet Vladimir Starkov
я написал ответ Vladimir Starkov
Хорошо, спасибо за проверку, не знаю, как мне это удавалось раньше, не могли бы вы помочь мне расположить делители вертикально по центру с поплавком, оставленным для#left-box и плавать прямо для#right-box? Какой CSS вы бы использовали? JackMahoney

Ваш Ответ

2   ответа
10

Вот это онлайн-демонстрация нужного вам решения

enter image description here

это было сделано с помощью этого HTML:

<div id='parent'>
    <div id='left-box' class='child'>Some text</div>
    <div id='right-box' class='child'>Details</div>    
</div>

и это css:

#parent {
    position: relative;

    /* decoration */
    width: 500px;
    height: 200px;
    background-color: #ddd;
}

.child {
    position: absolute;
    top: 50%;
    height: 70px;
    /* if text is one-line, line-height equal to height set text to the middle */
    line-height: 70px;
    /* margin-top is negative 1/2 of height */
    margin-top: -35px;

    /* decoration */
    width: 200px;
    text-align: center;
    background-color: #dfd;
}​

#left-box { left: 0; }
#right-box { right: 0; }
Error: User Rate Limit Exceeded JackMahoney
2

таблица и отображение: стили ячейки таблицы.
Проверьте этот сайт для более подробной информацииhttp://www.quirksmode.org/css/display.html


Примечание: если вы хотите, чтобы высота родительского элемента div была процентом (например, 100%), тогда он будет относительно высоты контейнера. Если контейнер является телом, тогда вам нужно будет также установить тело и высоту html, например, на 100%.

Вот пример того, как может выглядеть код:

<div id='parent'>
    <div id='left-box'>Some text</div>
    <div id='right-box'>Details</div>    
</div>​

<style>
body,html{
    height:100%;   
}
#parent{
    border:1px solid red;
    display:table;
    height:100%; 
    width:100%;        
}
#left-box{ 
    background-color:#eee;
    display: table-cell;
    vertical-align:middle;
    padding:3px;
    width:50%;
}
#right-box{ 
    background-color:#dddddd;
    display: table-cell;
    vertical-align:middle;
    padding:3px;
    width:50%;
}
​</style>

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