Вертикально выравнивать текст внутри плавающего div

У меня есть div справа, плавающий внутри другого контейнера div. В правом плавающем div я показываю текст (дата/время). Как вертикально выровнять текст без использования верхнего заполнения? Когда я использую верхнее дополнение, он перемещает мой div вниз, а затем он больше не находится внутри контейнера. Благодаря!Вертикально выравнивать текст внутри плавающего div

источник

2012-01-12 Ibanez

пожалуйста, напишите пример кода, если вы можете. было бы также полезно увидеть css контейнера. Если контейнер имеет известную или неизвестную высоту, и если содержащийся div имеет известную или неизвестную высоту, это определит, какой подход принять для решения вашей проблемы. – BumbleB2na

попробуйте указать высоту строки (если это только одна строка текста). Или я думаю, что что-то вроде «display: table-cell» или что-то в этом роде работает, но не уверен, что он полностью совместим с кросс-браузером (и старым браузером) – Rodolfo

. Я бы сказал, что используйте вертикальное выравнивание: сверху, но не видя, что вы делаете это, возможно, не правильный ответ. – j08691

В вашем css попробуйте использовать высоту линии на вашем контейнере. Используйте одно и то же значение в вашей линии, как в высоте вашего контейнера. Это должно вертикально выравнивать текст.

Если DIV является height:50px; чем добавить line-height:50px;

источник

2012-01-12 19:29:48 einar

Я думаю, это один из способов обойти. Если моя высота div равна 90px, и у меня есть две строки текста, тогда установка высоты строки до 45px помещает каждую строку на 25% и 75% вниз соответственно. Что, если я не хочу, чтобы две линии текста распространялись так далеко друг от друга? Благодаря! – Ibanez

Это правда, что может быть проблемой – einar

'width: 50px' должно быть' height: 50px', я прав? –

Вот пример, который добавляет плавающий DIV вправо и центрирует текст в нем по вертикали и по горизонтали.

http://jsfiddle.net/johnpapa/pUr6T/

Хитрость здесь, чтобы установить высоту строки элемента, чтобы быть в полной мере высота контейнера.

<div id="outerDiv"> 
    <div id="rightFloatingDiv"> 
     <p>Hello</p> 
    </div> 
    <p>Lorem ipsum dumsome Lorem ipsum dumsome Lorem ipsum </p> 
</div> 

#outerDiv{ 
    width:400px; 
    height:400px; 
    background:#EEAAEE; 
} 
#rightFloatingDiv{ 
    width:100px; 
    height:100px; 
    line-height:100px; 
    background:#EEEEEE; 
    float:right; 
} 
#rightFloatingDiv > p{ 
    width: 100%; 
    height: 100%; 
    line-height:inherit; 
    background:yellow; 
    vertical-align:middle; 
    text-align:center; 
}

источник

2012-01-12 19:03:41

Вертикально выравнивать текст внутри плавающего div

ответ

Смежные вопросы