如何垂直对齐段落中的文本?

时间:2012-06-15 13:51:31

标签: html css

我想知道将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>

12 个答案:

答案 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;
}