我想知道如何将p
元素中的文本垂直居中对齐。
以下是我的风格:
p.event_desc {
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
height: 35px;
margin: 0px;
}
<p class="event_desc">Lorem ipsum.</p>
发布于 2012-06-15 21:55:09
试试这些风格:
p.event_desc {
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
height:75px;
margin: 0px;
display: table-cell;
vertical-align: middle;
padding: 10px;
border: 1px solid #f00;
}
<p class="event_desc">lorem ipsum</p>
发布于 2012-06-15 21:52:55
为此,您可以使用line-height
。只需将其设置为p
标记的确切高度即可。
p.event_desc {
line-height:35px;
}
发布于 2019-09-07 11:23:14
如果涉及表格或设置行高的答案对您不起作用,您可以尝试在div中包装p元素,并设置其相对于父div高度的位置。
.parent-div{
width: 100px;
height: 100px;
background-color: blue;
}
.text-div{
position: relative;
top: 50%;
transform: translateY(-50%);
}
p.event_desc{
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
text-align: center;
}
<div class="parent-div">
<div class="text-div">
<p class="event_desc">
MY TEXT
</p>
</div>
</div>
https://stackoverflow.com/questions/11051951
复制相似问题