垂直对齐<p>标签</p>

时间:2013-05-08 14:10:44

标签: html css

我有这个HTML:

<div id="workAllocated">
    <h3>Work Allocated</h3>
    <p>Lorem Ipsum</p>  
    <p>Lorem Ipsum</p>  
</div>

以下CSS:

div#contentarea.profile_edit div {
    margin-bottom: 20px;
}
div#contentarea.profile_edit div.col_01 h3 {
    font-size: 2.4em;
    margin: 0;
}
div#workAllocated p {
    margin-bottom: 0px;
    border-bottom: 1px solid red;
}

结果看起来像这个快照:

enter image description here

但我需要它看起来像这样:

enter image description here

不同的是<p>标签内文本的垂直对齐方式。它在<p>容器内左上方对齐,但应该在左中。我尝试了一些tricks来改变行高并将显示更改为table-cell,然后应用vertical-align属性,但它们都不起作用。

提前致谢!

3 个答案:

答案 0 :(得分:3)

设置p的高度,然后将行高设置为等于该值。

答案 1 :(得分:1)

只需在p中添加一个高度并调整行高

即可

Fiddle .

//编辑//哎呀只看到了另一个anwser

答案 2 :(得分:1)

这对我有用:http://codepen.io/anon/pen/LrEcx

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

div#workAllocated p {
    margin: 0px;
    line-height: 1;
    border-bottom: 1px solid red;
    padding: 2px 0;
}

</style>

</head>
<body>

<div id="workAllocated">
    <h3>Work Allocated</h3>
    <p>Lorem Ipsum</p>  
    <p>Lorem Ipsum</p> 
    <p>Lorem Ipsum</p>  
    <p>Lorem Ipsum</p>  
    <p>LOREM IPSUM</p>
</div>

</body>
</html>