Вот решение, которое избегает использования тегов <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;
}
Это создаст родительский элемент любой высоты по вашему выбору со всеми его дочерними элементами, идеально выровненными посередине.Четное решение COOLER, которое даже не требует 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 для вас:
http://jsfiddle.net/NJqMp/1/