我想知道将p
元素中的文本对齐为垂直居中。
以下是我的风格:
p.event_desc {
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
height: 35px;
margin: 0px;
}
和HTML:
<p class="event_desc">Lorem ipsum.</p>
答案 0 :(得分:50)
尝试以下风格:
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>
答案 1 :(得分:23)
您可以使用line-height
。只需将其设置为p
标记的确切高度即可。
p.event_desc {
line-height:35px;
}
答案 2 :(得分:2)
如果涉及表格或设置行高的答案对您不起作用,则可以尝试将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>
答案 3 :(得分:1)
用户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>
答案 4 :(得分:1)
所以我个人不确定最好的方法,但我发现垂直对齐的一件事是使用 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>
我不知道这是好是坏,但如果这在某个地方只对一个人有帮助,那还是一无是处!
答案 5 :(得分:0)
你可以使用
line-height:35px;
你真的不应该在段落上设置一个高度,因为它不利于可访问性(如果用户增加文本大小等会发生什么)
而是使用具有高度的Div和具有正确行高的p:
<div style="height:35px;"><p style="line-height:35px;">text</p></div>
答案 6 :(得分:0)
试试这个:
short_open_tag = On
答案 7 :(得分:0)
如果您使用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会禁用此设置。
我希望对您有帮助
答案 8 :(得分:0)
可缩放多行文字的替代解决方案:
将垂直和水平填充设置为(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;
}
答案 9 :(得分:0)
以下样式将为您垂直居中放置
。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;
}
答案 10 :(得分:-1)
你是否尝试过保证金?我遇到了同样的问题,这就是为什么我在这里:)
这对我有什么帮助:
element {
margin: auto;
}
如果您需要左对齐或右对齐,可以执行以下操作:
element {
margin-top: auto;
margin-bottom: auto; /*You can use shorthand*/
}
这将在包含元素内垂直对齐,并将其扫描到右侧。
我希望这有用:)
答案 11 :(得分:-2)
在我的情况下,保证金自动工作正常。
p {
font: 22px/24px Ubuntu;
margin:auto 0px;
}