Простая проблема с вертикальным выравниванием с div

Question

Мой мозг жарится, поэтому мне нужны вы, ребята, помогите.

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

У меня есть

HTML

<a href='#'> 
    <div class="div"> 
    <div class="insideDiv">text here</div> 
    </div> 
</a> 

Мой CSS

a { 
    color: #006699; 
    text-decoration: none; 
    font-size: 10pt; 
    border-width: 0; 
    position: relative 
} 

.div{ 
    position: absolute; 
    background-color: red; 
    top: -75px; 
    left: 50px; 
    width: 100px; 
    height: 50px; 
    z-index: 1000; 
    padding: 8px; 
} 

.insideDiv{ 
    background-color: white; 
    width: 100px; 
    height: 47px; 
    border: solid 1px grey; 
    font-weight: bold; 
    vertical-align: middle; 
    text-align: center; 
} 

Похоже, text here не может быть вертикального выравнивания к середине, но горизонтально выровнять по центру. Может ли кто-нибудь помочь мне решить эту проблему? Спасибо!

Answer 1

Свойство vertical-align не относится к блочным элементам, только элементы в контексте строкового форматирования и ячеек таблицы

Вы можете добавить display: table-cell; к вашему .insideDiv класса вертикально центрировать его текст:

Пример: http://jsfiddle.net/Adrift/qTkAN/1/