1

我有这个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;
}

结果看起来像这个快照：

在此处输入图像描述

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

在此处输入图像描述

<p>不同的是标签内文本的垂直对齐。它在容器内左上角对齐，<p>但应该是左中角。我尝试了一些 技巧 ，例如更改行高并将显示更改为表格单元格，然后应用垂直对齐属性，但它们都没有真正起作用。

提前致谢！

4

3 回答 3

6

为您的 p 设置一个高度，然后将行高设置为等于该高度。

于 2013-05-08T14:13:08.137 回答
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>
于 2013-05-08T14:17:03.740 回答
0

只需为 p 添加一个高度并调整您的 line-height 即可

小提琴.

//EDIT// 哎呀刚刚看到另一个anwser

于 2013-05-08T14:14:49.247 回答