将p标签垂直对齐到中间

Question

我需要将p标签内的文本对齐到垂直中间。 由于我已经为p标签指定了高度，因此单行文字与p标签的顶部垂直对齐，但是当有2条描述行时，它是完美的。

高度30px应该保持不变。 我将内容结尾为2行，因此高度应相同。

这是演示http://jsfiddle.net/ydFy5/1/

Answer 1

尝试这个

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%; 
}

更新了小提琴。

Answer 2

我认为您可以定义行高 ，并且可以很好地配合演示。

当我在代码中实现了行高时，您的示例也可以正常工作。

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/

Answer 3

嘿，现在您可以定义line-height：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;
}

现场演示http://jsfiddle.net/ydFy5/10/

Answer 4

您可以将空img放入p标签中，例如：

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

（图像的高度是高度加上p的边距）

jsFiddle更新