我有这个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>
容器内左上方对齐,但应该在左中。我尝试了一些tricks来改变行高并将显示更改为table-cell,然后应用vertical-align属性,但它们都不起作用。
提前致谢!
答案 0 :(得分:3)
设置p的高度,然后将行高设置为等于该值。
答案 1 :(得分:1)
答案 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>