我的页面上有以下代码：
<p align="justify"
style="font-size:10pt;display:block;height:200px;vertical-align:middle;">
Content
</p>
我希望文本在p 标记的中心垂直对齐
使用vertical-align:middle 似乎不起作用。
有没有办法做到这一点？
【问题讨论】：
line-height吗？ （Line-height == 包装器的高度）通常使所有文本元素垂直居中。
这是一个避免使用<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 的更酷的解决方案是可能的但只是希望它伸展到最大子元素的高度：（哦，这在 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 fiddle 的示例，供您查看：
【讨论】：
如果您只有一行的内容，您可以使用一种解决方法，将 line-height 设置为元素的高度
line-height:200px;
【讨论】：
这并不像分配vertical-align:middle那么简单。这种风格适用于桌子。要在没有表格的情况下垂直对齐，您可以使用此处显示的技术之一：
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
【讨论】：
只需将段落的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>
小心，您可能需要使用某种类型的现代化器，因为 IE7 不支持此 CSS 属性。
【讨论】：
将您的显示更改为 table-cell 将允许您将段落视为一个表格单元格。
这是一个小提琴，所以你可以玩弄它（http://jsfiddle.net/stillb4llin/RxpFF/）。我在周围设置了一个边框，以便您可以看到段落的外部。
【讨论】：
我认为最简单的方法是使用 padding-top，填充量取决于你的文本大小。
例如，对于包含 10px 字体的 30px 高度 div，则 padding-top 为 10px，此外，您需要记住将添加的量作为 padding-top 从高度中删除。
意思是，如果您在 css 中提到固定高度为 30px，那么在应用 10px padding-top 之后，您应该将固定高度设为 20px。
vertical-align 属性用于设置容器而不是内容的垂直对齐方式。
【讨论】：
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 父级。
参考资料：
【讨论】：
最简单的方法是将其包装在一个表格中，如下所示：
<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" 应该作为 text-align: justify
移动到 CSS【讨论】：
内容