css lt p gt,等价的valign =＆lt; p＆gt;的中心用css

这是一个避免使用

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

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

使用标记......

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

和CSS

.container{

border: 1px solid red; /*to see the example*/

display: table-cell;

height: /* insert whatever height you want*/;

vertical-align: middle;

}

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

现在一个非常有趣的解决方案就是当你有一个父容器，里面装满了你想要让所有孩子并排放置并完全垂直对齐中间的内容。

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

标记：

here's some text and stuffs, make this whatever the heck

you want it to be

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

more stuff and this could be like an image or something

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中有效)

标记：

this is more text that you might want to have

vertically aligned in the middle with the others

so here's a sibling paragraph you might want to

have aligned next to the other.

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!

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/