我想知道将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>【问题讨论】：
精确地垂直对齐段落中的文本。
HTML
<main>
<p><span>TEXT to be centered in P tag</span></p>
</main>
CSS
main {
height: 400px;
position: relative;
}
main>p {
min-height: 128px;
line-height: 128px;
font-size: 48px;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
main>p>span {
position: absolute;
left: 0;
right: 0;
top: 64px;
transform: translateY(-68px);
-webkit-transform: translateY(-68px);
-moz-transform: translateY(-68px);
-ms-transform: translateY(-68px);
text-align: center;
}
【讨论】：
所以我个人不确定最佳方法，但我发现垂直对齐效果很好的一件事是使用 Flex，因为你可以证明它的内容！
假设您有以下 HTML 和 CSS：
.paragraph {
font-weight: light;
color: gray;
min-height: 6rem;
background: lightblue;
}<h1 class="heading"> Nice to meet you! </h1>
<p class="paragraph"> This is a paragraph </p>我们最终得到一个不垂直居中的段落，现在如果我们使用 Flex Column 并应用最小高度 + BG，我们会得到以下结果：
.myflexbox {
min-height: 6rem;
display: flex;
flex-direction: column;
justify-content: center;
background: lightblue;
}
.paragraph {
font-weight: light;
color: gray;
}<h1 class="heading"> Nice to meet you! </h1>
<div class="myflexbox">
<p class="paragraph"> This is a paragraph </p>
</div>但是，在某些情况下，您不能轻易地将 P 标签包装在 div 中，在 P 标签上使用 Flexbox 是非常好的，即使这不是最好的做法。
.myflexparagraph {
min-height: 6rem;
display: flex;
flex-direction: column;
justify-content: center;
background: lightblue;
}
.paragraph {
font-weight: light;
color: gray;
}<h1 class="heading"> Nice to meet you! </h1>
<p class="paragraph myflexparagraph"> This is a paragraph </p>我不知道这是好是坏，但如果这仅对某个地方的一个人有所帮助，那还是一无是处！
【讨论】：
用户 vertical-align: middle; 以及 text-align: center 属性
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 3px solid green;
text-align: center;
}
.center p {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
【讨论】：
在我的情况下，边距自动工作正常。
p {
font: 22px/24px Ubuntu;
margin:auto 0px;
}
【讨论】：
以下样式将为您垂直居中。
p.event_desc {
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
height: 35px;
display: table-cell;
vertical-align: middle;
margin: 0px;
}
【讨论】：
适用于多行文本的替代解决方案：
设置垂直和水平填充为(height - line-height) / 2
p.event_desc {
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
padding: 10.5px 0;
margin: 0px;
}
【讨论】：
如果涉及表格或设置行高的答案对您不起作用，您可以尝试将 p 元素包装在 div 中，并设置其相对于父 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>【讨论】：
如果您使用 Bootstrap，请尝试将 margin-bottom 0 分配给段落，然后将属性 align-items-center 分配给容器，例如，像这样：
<div class="row align-items-center">
<p class="col-sm-1 mb-0">
....
</p>
</div>
Bootstrap 默认分配一个计算边距底部，所以 mb-0 禁用了这个。
希望对你有帮助
【讨论】：
试试这些样式：
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>【讨论】：
display 中使用表格来处理这样的事情是不好的。
你可以使用
line-height:35px;
你真的不应该在段落上设置高度，因为它不利于可访问性（如果用户增加文本大小等会发生什么）
改为使用具有高度的 Div 和其中的 p 以及正确的行高：
<div style="height:35px;"><p style="line-height:35px;">text</p></div>
【讨论】：
您可以为此使用line-height。只需将其设置为您的 p 标记的确切高度即可。
p.event_desc {
line-height:35px;
}
【讨论】：