将 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

嘿，现在你可以定义行高：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 3

我认为您可以定义行高，这将适用于您的演示。

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

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 4

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

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

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

js小提琴更新