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

I would like to know to align the text in a p element 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>

5 个解决方案

#1

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>

#2

You can use line-height for that. Just set it up to the exact height of your p tag.

你可以使用线高。把它设置成p标签的确切高度。

p.event_desc {
  line-height:35px;
}

#3

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>

#4

Try this:

试试这个:

display: table-cell;
vertical-align: middle;
padding: 10px;

#5

Did you try to play with the margin? I had the same problem, that's why I'm here :)

你试着去玩边缘游戏了吗?我也有同样的问题，这就是我来这里的原因

Here's what helped me:

这就是帮助我:

element {
    margin: auto;

}

If you need it to be aligned left or right and center, you can do:

如果你需要它左右对齐和居中对齐，你可以这样做:

element {
    margin-top: auto;
    margin-bottom: auto; /*You can use shorthand*/

}

This will allign it vertically within the containing element, and scooch it to the right side.

这将使它垂直地在包含的元素内，并将它铲到右边。

I hope this is helpful :)

我希望这能有所帮助。

#1