Вертикально выровняйте тег p до середины

Мне нужно выровнять текст внутри тега p до вертикальной середины. Поскольку я дал высоту для тега p, текст в одной строке вертикально выровнен в верхней части тега p, но когда есть 2 строки описания, это идеально.Вертикально выровняйте тег p до середины

Высота 30px должна оставаться неизменной. Я заканчиваю контент до 2 строк, поэтому высота должна быть одинаковой.

Вот демо http://jsfiddle.net/ydFy5/1/

источник

2012-07-02 Sowmya

Я обычно использую отступы и незакрепленную высоту, как это: HTTP: // jsfiddle.net/ydFy5/1/ - il тоже будет сосредоточен на одной линии – Onheiron

Привет, софийя, вы можете показать нам изображение или скриншот вашего точного требования, что именно вы ищете ....... –

Эй теперь вы можете определить высоту строки: 30px

, как как этот

p.event_desc{ 
    background: rgba(0,0,0,0.76); 
    padding:4px; 
    position:absolute; 
    top: 0px; 
    color: #ffffff; 
    font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif; 
    line-height: 30px; 
    margin: 0 4px 0 0; width:93%; height:30px; 
}

Live Demo http://jsfiddle.net/ydFy5/10/

источник

2012-07-02 07:03:00

Но это не работает для 2 строк текста – Sowmya

@Sowmya снимите свой рост и выполните эту проверку на демо http://jsfiddle.net/ydFy5/20/ –

Попробуйте

p.event_desc{ 
    background: rgba(0,0,0,0.76); 
    padding:10px 5px; 
    position:absolute; 
    top: 0px; 
    color: #ffffff; 
    font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif; 
    line-height: 16px; 
    margin: 0 4px 0 0; 
    width:93%; 
}

Updated Fiddle.

источник

2012-07-02 07:02:02

Я думаю, вы можете определить высоту линии и что будет хорошо работать с демо.

Ваш пример также отлично работает, когда я реализовал линию в вашем коде.

p.event_desc{ 
    background: rgba(0,0,0,0.76); 
    padding:4px; 
    top: 0px; 
    color: #ffffff; 
    font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif; 
    line-height: 30px; 
    margin: 0 4px 0 0; width:93%; height:30px; 
}

http://jsfiddle.net/ydFy5/8/

источник

2012-07-02 07:02:41

, но тогда это не работа на 2 линии – Ashwin

Вы можете бросить в пустой img в p тега например:

<img style="height:38px;" align="middle"/>

(высота изображения высоты плюс запас вашего p)

jsFiddle update

источник

2012-07-02 07:05:04

Вертикально выровняйте тег p до середины

ответ

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