Как мне центрировать div по вертикали?

Возможный дубликат:
Как лучше всего центрировать элемент Div по вертикали с помощью CSS

.title_text_only{
position:absolute;
width:100%;
display:none;
z-index:9;
top:50%;
bottom:50%;
text-align:center;
color:#fff;
font-size:18px;
text-shadow: 1px 1px 1px #666;
}

Прямо сейчас, похоже, это не работает. верхние 50% не центрируют его по вертикали. Это немного до дна. Как будто верхняя граница 50%.


javascript vertical-alignment html jquery css
person TIMEX    schedule 14.12.2010    source источник
comment
попробуйте сначала добавить произвольную высоту   -  person Eric Fortis    schedule 14.12.2010

Ответы (4)


arrow_upward
2
arrow_downward

Если вы можете указать высоту поля, вы можете использовать margin-top: -[height / 2]px (заполните [height / 2] и обратите внимание, что большинство браузеров округляют дробные пиксели в большую сторону при 100% увеличении).

Если вы можете указать высоту его родителя, вы можете сделать что-то вроде этого:

parent {
    height: [height]px;
}
child {
    /* Make the element part of the inline flow, as vertical-align isn't supported on block elements */
    display: -moz-inline-box; /* Old Firefox doesn't support inline-block */
    display: inline-block;
    /* IE < 8 doesn't support inline-block on native block-level elements */
    *display: inline;
    *zoom: 1;

    /* The interesting bit */
    line-height: [height]px;
    vertical-align: middle;
}

Если ожидается, что содержимое дочернего элемента будет перенесено на несколько строк, вы можете заключить его в дочерний элемент, который сбрасывает line-height.

person eyelidlessness    schedule 14.12.2010

arrow_upward
2
arrow_downward

Как центрировать div по вертикали для всех браузеров?

person Gaurav    schedule 14.12.2010

arrow_upward
1
arrow_downward

top: 50%; делает именно то, что вы подозреваете: он помещает верхний край на высоту 50%. Вы можете компенсировать этот эффект, применив отрицательное поле по вертикали, равное половине высоты элемента. Например, если высота элемента составляет 100 пикселей, вы должны добавить это свойство:

margin-top: -50px;
person Matt Ball    schedule 14.12.2010

arrow_upward
1
arrow_downward

Если высота элемента фиксированная, выполните следующие действия.

CSS:

.title_text_only{
position:absolute;
width:100%;
display:none;
z-index:9;
**top:50%;**
bottom:50%;
text-align:center;
color:#fff;
font-size:18px;
text-shadow: 1px 1px 1px #666;
**margin-top: -(half the height)**
}

иначе для вертикального центрирования div с динамической высотой вам понадобится javascript ..

document.getElementById('myElement').style.marginTop = (-1) * document.getElementById('myElement').offsetHeight / 2
person Tarun    schedule 14.12.2010