Выровнять текст по центру элемента - PullRequest
Новая
       2

Выровнять текст по центру элемента

4 голосов
/ 27 июня 2010

У меня есть div, который около 200px x 40px.Иногда этот блок будет содержать одну строку текста, а иногда он будет содержать две строки.В случае, если он содержит 2 строки текста, я отрегулировал высоту строки так, чтобы она выглядела сбалансированной внутри div.Тем не менее, в случае, если есть одна строка текста, текст выравнивается с верхней частью div, оставляя нижнюю пустую.

Вместо этого я хочу, чтобы одна строка текста отображалась по центру внутри div.Каков наилучший способ настроить это?Должен ли я поместить текст внутри вторичного элемента, например <p>, а затем попытаться применить vertical-align: middle?Кажется, что должен быть более простой, более обтекаемый способ сделать это.Есть идеи?

Ответы [ 2 ]

9 голосов
/ 27 июня 2010

Я не уверен, работает ли он в любом браузере (работает на Firefox, Chrome, IE8) (не работает на IE7 -) 

<div style="display: table-row; height: 180px; width: 500px;">
    <div style="display: table-cell; vertical-align: middle; width: 500px; text-align: center;">Text</div>
</div>

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

2 голосов
/ 27 июня 2010

Хотя это кажется простой проблемой, в CSS2 AFAK нет простого решения. Тема Forrest содержит хороший обзор различных подходов к этой проблеме.

...