Вертикальное выравнивание текстов в div в моем случае

0

Я пытаюсь вертикально выравнивать тексты в своем div.

У меня есть что-то вроде

<div id='div'>
   <h1>test here</h1>
</div>

#div{
   float: left;
   padding: 10px;
   height: 180px;
   width: 130px;
   line-height: 180px;
   text-align: center;
   vertical-align: middle;
}

#div h1{
   height: 180px;
   line-height: 180px;
   vertical-align:middle;
   font:normal 0.9em proxima-reg;
}

Я не могу показаться вертикальным, выравнивая тексты тегов h1 внутри моего div. Теперь мой мозг жарится, и я надеялся, что кто-то сможет мне помочь. Заранее спасибо.

Теги:

3 ответа

1
Лучший ответ

Вот один из способов сделать это:

#div {
    float: left;
    padding: 10px;
    height: 180px;
    width: 130px;
    line-height: 180px;
    text-align: center;
    background-color: yellow;
}
#div h1 {
    vertical-align: middle;
    font:normal 0.9em proxima-reg;
    outline: 1px dotted blue;
    display: inline-block;
}

См.: http://jsfiddle.net/audetwebdesign/sUzK9/

У вашего #div есть четко определенные размеры, что упрощает работу.

Я применил display: inline-block к h1 и удалил любые значения высоты/высоты строки, и, похоже, это работает.

1

Попробуйте это (http://jsfiddle.net/myajouri/zyB6C/):

#div{
   float: left;
   display: table-cell;
   padding: 10px;
   height: 180px;
   width: 130px;
   line-height: 180px;
   text-align: center;
   vertical-align: middle;
    background-color: red;
}

#div h1{
   display: inline-block;
   vertical-align: middle;
   font:normal 0.9em proxima-reg;
    background-color: green;
}
1

vertical-align больше подходит для ячеек таблицы, чем для "не-встроенных" элементов DIV.

Дайте вашей DIV фиксированную ширину и высоту, а затем попробуйте использовать margin: auto 0px; для вертикального выравнивания.

Или...

Дайте вашему DIV верхнее и нижнее дополнение.

В любом случае вам нужно будет выровнять текст по центру.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню