55

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

4

11 回答 11

72

试试这些风格： 

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>

于 2012-06-15T13:55:08.853 回答
31

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

p.event_desc {
  line-height:35px;
}
于 2012-06-15T13:52:55.403 回答
6

如果涉及表格或设置行高的答案对您不起作用，您可以尝试将 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>

于 2019-09-07T03:23:13.503 回答
2

所以就我个人而言，我不确定最好的方法，但我发现垂直对齐效果很好的一件事是使用 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>

我不知道这是好是坏，但是如果这仅对某个地方的一个人有帮助，那仍然是一个人，那就无济于事了！

于 2021-02-18T17:50:27.500 回答
1

你可以使用

    line-height:35px;

您真的不应该在段落上设置高度，因为它不利于可访问性（如果用户增加文本大小等会发生什么）

而是使用具有高度的 Div 和其中的 p 具有正确的行高：

    <div style="height:35px;"><p style="line-height:35px;">text</p></div>
于 2012-06-15T15:09:55.477 回答
1

如果您使用 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 禁用了这个。

我希望它有帮助

于 2019-03-02T11:36:08.453 回答
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>
于 2020-08-31T09:43:20.577 回答
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;
}
于 2020-05-10T22:10:36.920 回答
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;
}
于 2020-07-08T21:26:31.703 回答
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;
}
于 2022-01-27T13:45:41.273 回答
-1

在我的情况下，保证金自动工作正常。

p {
    font: 22px/24px Ubuntu;
    margin:auto 0px;
}
于 2020-08-31T09:05:23.217 回答