Вертикально центр неизвестной длины текста внутри div

Question

Я хочу центрировать неизвестную длину текста (нормально он ограничен определенным размером, но я не знаю, нужна ли ему одна строка или две строки) внутри div. Поэтому я не могу использовать line-height. Я пытался использовать display: table-cell, но макет был уничтожен. Я не могу использовать некоторые трюки с top, потому что мне нужно это для позиционирования.

Here is an example.

Mockup:

Оригинальный код:

HTML:

<div class="background">&nbsp;</div> 
<div class="TileText">MyText - Another long, long, long text</div> 

CSS:

.background{ 
    background-color:#000; 
    height: 400px; 
    width: 100%; 
} 

.TileText{ 
    position: relative; 
    top: -135px; 
    max-width: 200px; 
    height: 80px; 
    background-color: #FFF; 
    color: #black; 
    clear: both; 
    padding-left: 10px; 
} 

Текущее состояние:

HTML:

<img src="images/castle.png" width="300" height="333" title="Castle" alt="Castle" /> 
<div class="TileTextWrapper"> 
    <div class="TileText">Text</div> 
</div> 

CSS:

.TileTextWrapper{ 
    position: relative; 
    top: -135px; 
    max-width: 200px; 
    height: 80px; 
    background-color: #FFF; 
    color: #57abe9; 
    clear: both; 
    padding-left: 10px; 
    display: table; 
} 

.TileText{ 
    display: table-cell; 
    vertical-align: middle; 
} 

Обновление:

Теперь текст выровнен по вертикали. Но я боюсь, что display: table будет работать только с современным браузером.

Answer 1

Я обновил свою скрипку:

Это похоже на работу

смотрите: http://jsfiddle.net/hSCtq/11/ для справки.

Я бы поставил .TileText внутри .background. Создание пустого div для фонового изображения не является семантически правильным и не является необходимым в большинстве ситуаций. Одна ситуация для отдельного фонового div была бы, если вам нужно установить непрозрачность фонового изображения отдельно от содержимого.

<div class="background"> 
    <div class="TileText">MyText - Another long, long, long text</div> 
</div> 


.background { 
    background-color:#000; 
    height: 400px; 
    width: 100%; 
    display: table 
} 

.TileText{ 
    max-width: 200px; 
    display: table-cell; 
    vertical-align: middle; 
    color: #fff; 
    clear: both; 
    padding-left: 10px; 
} 

---

Другие вопросы с тем же ответом.

Horizontally and vertically center a pre tag without the use of tables?

The old center a image in a div issue (image size variable - div size fixed)

Кроме того, первый результат от прибегая к помощи «Центр вертикальный текст CSS» даст вам тот же код структуры я писал в моем JSfiddle

Answer 2

Вы должны добавить display:table-cell;, а также добавить vertical-align:middle;

Answer 3

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

<div style="width:600px; height:600px; border:#000000 1px solid;"> 

    <table style="width:100%; height:100%; vertical-align:middle"> 
     <tr> 
      <td> 
    MyText - Another long, long, long text 
      </td> 
     </tr> 
    </table> 
</div> 

Answer 4

Добавить <p> тег внутри TileText DIV:

HTML

<div class="background"> &nbsp; </div> 
<div class="TileText"><p>MyText - Another long, long, long text</p></div> 

CSS

.background{ 
    background-color:#000; 
    height: 400px; 
    width: 100%; 
} 

.TileText{ 
    position: relative; 
    top: -135px; 
    max-width: 200px; 
    height: 80px; 
    background-color: #FFF; 
    color: #black; 
    clear: both; 
    padding-left: 10px; 
} 

.TileText p { 
    position:absolute; 
    display: table-cell; 
    vertical-align: middle 

    } 

Пример здесь: http://jsbin.com/ubixux/2/edit