Html 如何垂直对齐段落中的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11051951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I vertically align text in a paragraph?
提问by Sowmya
I would like to know to align the text in a pelement to be vertically centered.
我想知道将p元素中的文本对齐以垂直居中。
Here are my styles:
以下是我的风格：
p.event_desc {
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
height: 35px;
margin: 0px;
}
and HTML:
和 HTML：
<p class="event_desc">Lorem ipsum.</p>
回答by Dipak
Try these styles:
试试这些风格：
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>回答by Andres Ilich
You can use line-heightfor that. Just set it up to the exact height of your ptag.
你可以用line-height它。只需将其设置为p标签的确切高度即可。
p.event_desc {
line-height:35px;
}
回答by Edgar Chávez
If the answers that involve tables or setting line-height don't work for you, you can experiment with wrapping the p element in a div and style its positioning relative to the height of the parent div.
如果涉及表格或设置行高的答案对您不起作用，您可以尝试将 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>回答by Mike Hague
you could use
你可以用
line-height:35px;
You really shouldnt set a height on paragraph as its not good for accessibility (what happens if the user increase text size etc)
您真的不应该在段落上设置高度，因为它不利于可访问性（如果用户增加文本大小等会发生什么）
Instead use a Div with a hight and the p inside it with the correct line-height:
而是使用带有高度的 Div 和带有正确行高的 p ：
<div style="height:35px;"><p style="line-height:35px;">text</p></div>
回答by Fran Mateos
If you use Bootstrap, try to assign margin-bottom 0 to the paragraph and after assign the property align-items-center to container, for example, like this:
如果您使用 Bootstrap，请尝试将 margin-bottom 0 分配给段落，然后将属性 align-items-center 分配给容器，例如，如下所示：
<div class="row align-items-center">
<p class="col-sm-1 mb-0">
....
</p>
</div>
Bootstrap by default assign a calculate margin bottom, so mb-0 disabled this.
Bootstrap 默认分配一个计算边距底部，所以 mb-0 禁用了这个。
I hope it helps
我希望它有帮助
回答by fralewsmi
Alternative solution which scales for multi-line text:
适用于多行文本的替代解决方案：
Set vertical and horizontal padding to be (height - line-height) / 2
将垂直和水平填充设置为 (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;
}
