Как вертикально выровнять встроенные элементы

Ответ 1

Вы можете сделать это inline-block и дать ему line-height:

a {
    line-height: 50px;
    display: inline-block;
}

JSFiddle с рабочим примером: http://jsfiddle.net/KgqJS/

Ответ 2

vertical-align работает только с элементами display: table-cell, и это значение свойства не поддерживается в < IE8.

Известный текст

Если вы знаете, что текст центрирован, это довольно просто. У вас есть два варианта.

<style type="text/css">
    #container {
        padding: 10px 0;
    }
</style>
<div id="container">
    Example of some lovely<br />
    multiline text.
</div>

Вы можете использовать добавление CSS для добавления отступов сверху и снизу, чтобы текст появился посередине. Это полезно для многострочного текста.

<style type="text/css">
    #container {
        height: 100px;
        line-height: 100px;
    }
</style>
<div id="container">
    Example
</div>

Вы можете использовать свойство line-height, чтобы сделать текст вертикально центрированным. Это работает только с одной строкой текста. Вы можете догадаться, что произойдет, если будет больше 1.

Динамический многострочный текст

Здесь все начинает становиться несколько сложным, и, возможно, вы плачете за таблицы.

<style type="text/css">
    #container {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div id="container">
    <?php echo $content; ?>
</div>

Временное решение для < IE8.

Источник.

Ответ 3

<div><p>test test test test<p></div>

div{
    border:1px solid red;
    width:400px;
    height:400px;
    position:relative;
}


p{
    height:30px;
    position:absolute;
    top:50%;
    margin-top:-15px; /* negative half of height*/
}

Проверьте рабочий пример http://jsfiddle.net/Z2ssq/1/