logo标签列表

如何在段落中垂直对齐文本？

htmlcss
63

我想知道如何使 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>

可能重复：https://dev59.com/6Wgu5IYBdhLWcg3w9ryX#10939940 - doptrois
区别在于这个具有固定的高度且没有父元素。 - Julix
可以在 css-tricks.com 上找到一个非常好的参考，用于水平或垂直对齐不同的元素组合。 - ˈvɔlə
12个回答
78

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>

我对HTML CSS还不熟悉。我努力寻找一个不涉及表格的答案（因为显然它们不好...）。这个答案太简单了，我不能错过，所以我决定使用它。 - V Maharajh
@vivekmaharajh 使用HTML表格标签进行布局是不好的。我不认为在像这样的情况下使用display中的表格是不好的。 - Keavon
如果您希望段落跨越整个宽度，但只包含几个单词怎么办？ - Giulio Piancastelli
除了现在我不能。 - mae
41

你可以使用line-height来实现这个。只需将其设置为你的p标签的确切高度即可。

p.event_desc {
  line-height:35px;
}
2
在这种情况下，我们可以将段落垂直居中对齐到容器内部，例如使用此方法：在未知宽高元素上水平垂直居中。 - Andres Ilich
哇，你居然在周五下午学到了新东西...太酷了 :-D - Gatekeeper
2
在表格布局时代，大家都喜欢使用 valign！ ;) - Luca
12
如果那些涉及表格或设置行高的答案对您无效，您可以尝试在一个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>

这似乎只对具有设置高度的父元素有效。 - Martin
这正是我所需要的！其他所有答案对我都不起作用，因为我正在使用inline-block元素。 - Roodey
5

就我个人而言，我不确定最佳方法，但其中一种垂直对齐的好方法是使用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 并将最小高度和背景应用于它，我们将得到以下结果： 

.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>

然而，在某些情况下，你不可能轻松地用div封装P标签，不过在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>

我不知道这是好事还是坏事，但如果这能在某个地方帮助到一人，那就比什么都没有多了一人！

2
如果您使用Bootstrap，请尝试将段落的margin-bottom属性设置为0，然后将align-items-center属性分配给容器，例如像这样：

如果你用了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可以禁用它。

希望这能帮助到您。

1

你可以使用

    line-height:35px;

你真的不应该在段落上设置高度，因为这对辅助功能不利（如果用户增加文本大小会发生什么等）

相反，应该使用带有高度的 Div，然后在其中使用正确行高的 p：

    <div style="height:35px;"><p style="line-height:35px;">text</p></div>
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>
0

试试这个：

<div class="parent">
    <p class="child"> This is a paragraph </p>
</div>

parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

p {
    text-align: center;
}

成功。

0

精确地在段落中垂直对齐文本。

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;
}
0

适用于多行文本的替代解决方案：

设置垂直和水平填充为(高度 - 行高) / 2

p.event_desc {
    font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 14px;
    padding: 10.5px 0;
    margin: 0px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接