Question

我的页面上有以下代码：

<p align="justify" 
   style="font-size:10pt;display:block;height:200px;vertical-align:middle;"> 
  Content
</p>

我希望文本在p标记

的中心垂直对齐

使用vertical-align:middle似乎不起作用。

有办法做到这一点吗？

Answer 1

这是一个避免使用<table>标记的解决方案。

它适用于Internet Explorer 8和9，Chrome，Firefox和Safari（但不是IE7，但上次我检查它们在全球的市场份额约为2％）。

首先，摆脱试图在段落标记中尝试垂直对齐文本的概念 - 而不是考虑在容器中对齐段落。

使用标记...

<div class="container">
    <p>The text that you'd wish to have vertically aligned in the middle of the
       container...which might be like an article column, or whatever</p>
</div>

和CSS

.container{
     border: 1px solid red; /*to see the example*/
     display: table-cell;
     height: /* insert whatever height you want*/;
     vertical-align: middle;
 }

这将使段落垂直对齐，使其位于容器元素的垂直中心。

现在一个非常有趣的解决方案是，如果您的父容器中包含所有内容，您希望将所有子项并排放置，并且与中间完全垂直对齐。

当然，如果您希望父容器具有特定大小，请使用此版本：

标记：

<div class="containerTwo">
     <p>here's some text and stuffs, make this whatever the heck 
     you want it to be</p>
     <p>these can be any height and, really any element, the magic
     is in the display property of the elements so this still 
     looks pretty semantic</p>
     <p>more stuff and this could be like an image or something</p>
</div>

CSS：

.containerTwo{
     border: 1px solid green; /* for sake of the example */
     display: table-cell;
     height: /* what you want it to be */;
     vertical-align: middle;
}
.containerTwo p{
     border: 1px solid blue; /* for sake of example */
     display: inline-block;
     width: 30%; /* all of the child elems shouldn't go over 100% */
     vertical-align: middle;
}

这将生成一个父元素，您可以选择任何高度，其中所有子元素都在中间完美对齐。当你有一堆不同的高度元素，你们都希望在中间相互对齐并且你不想指定高度时，甚至不需要display: table-cell的COOLER解决方案是可能的。父元素，但只是希望它伸展到最大的子元素的高度:(哦，这在IE7中有效）

标记：

<div class="containerThree">
    <p>this is more text that you might want to have 
       vertically aligned in the middle with the others</p>
    <p>so here's a sibling paragraph you might want to 
       have aligned next to the other.</p>
    <div title="a really big element!"></div>
    <p>like the last one, the width can't add up to more
       than 100% of the parent element, otherwise they just
       wrap.  But atleast no table-cell!</p>
</div>

CSS：

.containerThree{
     border: 1px solid purple; /* for the example */
     /* and that's it!!! */
}

.containerThree p, .containerThree div{
     border: 1px solid blue;
     width: 20%; /* can't add beyond total width of parent */
     display: inline-block;
     *display: inline; /* ie7 hack */
     zoom: 1; /* ie7 hack */
     vertical-align: middle;

}

.containerThree div{  /* to simulate a big element */
     height: 400px; 
}

对于这一个，一切都将彼此垂直对齐。

这是一个关于js小提琴的例子，你可以看到：

http://jsfiddle.net/NJqMp/1/

Answer 2

如果您只有适合一行的内容，则可以使用将行高设置为元素高度的解决方法

line-height:200px;

Answer 3

这并不像分配vertical-align:middle那么简单。那种风格适用于桌子。要在没有表的情况下垂直对齐，可以使用此处显示的技术之一：

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Answer 4

只需将段落的display属性更改为table-cell，然后将display: table; width: 100%;应用于段落的容器。

<div style="display:table; width:100%">
  <p align="justify" style="font-size:10pt;display:table-cell; height:200px;vertical-align:middle; background-color:rgba(255,0,0,0.3)"> 
    Content
  </p> 
</div>

jsFiddle

小心，您可能需要使用某种类型的现代化器，因为IE7不支持此CSS属性。

Answer 5

将显示更改为 table-cell ，您可以将该段落作为表格单元格。

这是一个小提琴，所以你可以玩它（http://jsfiddle.net/stillb4llin/RxpFF/）。我放了一个边框，所以你可以看到段落的外面。

Answer 6

你能做的最简单的方法我认为使用padding-top和填充量取决于你的文本大小。

因此，例如对于包含10px字体的30px高度div，则填充顶部为10px，此外，您需要记住将您添加的数量作为填充顶部从高处移除。

如果您提到css中的高度为固定的30px，那么在应用10px填充顶部后，您应该将该高度设置为20px。

vertical-align属性用于设置容器的垂直对齐方式而不是内容。

Answer 7

As in a similar question，使用带有占位符元素的display: inline-block将文本垂直居中于块元素内：

<!doctype html>
<html lang="en">
<head>
 <style type="text/css">
 #blockbox { height: 500px; border: 1px solid black;}
 #container, #placeholder { height: 100%; }

 #content, #placeholder { display:inline-block; vertical-align: middle; }
 </style>
</head>

<body>
 <div id="blockbox">
  <p id="container">
    <span id="content">
    Content
    </span>
    <span id="placeholder"></span>
  </p>
 </div>
</body>
</html>

垂直对齐仅适用于inline elements or table cells，因此在垂直居中块元素时，请将其与display:inline-block或display:table-cell一起使用display:table父级。

<强>参考文献：

CSS Horizontal and Vertical Centering

Answer 8

最简单的方法是将它包装在如下的表中：

<table><tr><td style='vertical-align: middle; height:200px;'>
  <p align="justify" style="font-size:10pt;display:block;"> 
    Content
  </p> 
</td></tr></table>

哦， align =“justify”应该移动到CSS作为 text-align：justify

<p>的valign = center的等价于css </p>

8 个答案: