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

Question

У меня есть этот тег привязки, между которыми есть текст, чтобы выровнять текст по вертикалиЯ использую этот атрибут css vertical-align: middle.Ничего не происходит.

Answer 1

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

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

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

Answer 2

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

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

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

<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>

Обходной путь для .

Источник .

Answer 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/