Ребенок div разбивается на родительский div. Зачем?

Question

У меня есть родительский div и дочерний div с некоторым текстом. Я хочу, чтобы он был вертикально центрирован в родительском div. Кажется, я не могу сделать ребенка вертикально центрированным в родительском div. и почему он выходит из родительского div?

Я надеюсь, что это имеет смысл. Я пытался загрузить иллюстрацию, но, видимо, мне нужно 10 репутации для отправки изображения.

Answer 1

Проверьте приведенную ниже скрипту: выравнивает текст по вертикали в середине родителя div.

http://jsfiddle.net/Kritika/43VYg/

HTML:

<div class="wrapper"> 
    <div class="inner"> 
    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum 
    </div> 
</div> 

CSS:

.wrapper { 
    display: table-cell; 
    width: 400px; 
    height: 400px; 
    text-align: center; 
    vertical-align: middle; 
    border: 1px dotted #656565; 
    } 

    .inner { 
    padding: 10px; 
    } 

ПРИМЕЧАНИЕ: Это не поддерживает старые браузеры как IE 7.

Вы можете сослаться на ссылку ниже для выравнивание текста с использованием положения абсолютное/относительное

Aligning text using absolute positioning