Я пытаюсь вертикально выравнивать тексты в своем 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
. Теперь мой мозг жарится, и я надеялся, что кто-то сможет мне помочь. Заранее спасибо.
Вот один из способов сделать это:
#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
и удалил любые значения высоты/высоты строки, и, похоже, это работает.
Попробуйте это (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;
}
vertical-align
больше подходит для ячеек таблицы, чем для "не-встроенных" элементов DIV.
Дайте вашей DIV фиксированную ширину и высоту, а затем попробуйте использовать margin: auto 0px;
для вертикального выравнивания.
Или...
Дайте вашему DIV верхнее и нижнее дополнение.
В любом случае вам нужно будет выровнять текст по центру.