Как выровнять текст по вертикали?

StackOverflow https://stackoverflow.com/questions/1101827

  •  12-09-2019
  •  | 
  •  

Вопрос

Как вертикально выровнять текст в плавающем элементе div?Например:У меня есть динамический контент с фиксированной высотой.если контент маленький или большой, он должен автоматически выравниваться по вертикали.

Спасибо

Это было полезно?

Решение

Ячейки таблицы — самое простое решение.

Альтернативой является Javascript (измерьте размер и размер текста div, затем отрегулируйте отступы, высоту строки или что-то еще).

редактировать:Или этот потрясающий CSS:

CSS

div#container {
    border: solid 1px;
    height: 300px;
}

div#content {
    border: solid 1px;
}

div#balance {
    border: solid 1px;
    /* gotta be 100% */
    height: 100%;
}

div.valign {
    /* firefox 2 */
    display: -moz-inline-box;
    /* everybody else */
    display: inline-block;

    vertical-align: middle;
}

/* IE 6 and 7 hack */
html* div.valign {
    display: inline;
}

HTML

<div id="container">
    <div id="balance" class="valign"></div>
    <div id="content" class="valign">
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah
    </div>
</div>

Давно хотел написать об этом в блоге, думаю, пришло время.

Другие советы

Я знаю, что это испортит мою репутацию, но...используйте ячейку таблицы.Любое кроссбраузерное CSS-решение для вертикального выравнивания будет в два раза сложнее поддерживать, если быть оптимистом.

<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div>

Крис Койер написал отличный урок по этому поводу: http://css-tricks.com/vertical-center-multi-lined-text/

Я сам использовал его, и он работает отлично.

Я уже сталкивался с этой проблемой.Чтобы не фальсифицировать, процитирую экспертов:"...внутренний объект абсолютно позиционирован на половине высоты области.Затем поднимается на половину своей высоты».

Все это можно сделать с помощью % вместо точных пикселей, если данные генерируются из базы данных и высота варьируется для каждой страницы.

Источник: здесь

Демо:ссылка на странице выше

Вот мой первый ответ...

Вы пробовали вертикальное выравнивание:середина;?

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top