< The Webmakers Lounge />

div valign-center

Простой и вроде кросс-браузерный способ позиционирования блока известных размеров в центр окна браузера с помощью css:

div.valign-center {
position: absolute;
top: 50%;
left: 50%;
height:200px;
width:800px;
margin-top: -100px; //где 100 - половина высоты самого блока
margin-left: -400px; //где 400 - соответственно половина ширины этого блока
}

9 комментариев на “div valign-center”

  1. il сказал:

    не кроссбраузерный. firefox 2.0 top: в процентах не понимает.

  2. il сказал:

    ой, не… это я туплюююю)) фаирфокс вс понимает, это я дурак дивы не закрыл)

  3. neutrino сказал:

    :)

  4. Number One сказал:

    ну ширина ладно, а что делать будем если высота не известна?

  5. neutrino сказал:

    ну ширина ладно, а что делать будем если высота не известна?

    Подозреваю что без JS не обойтись, Дэн. Способ не претендует на универсальность :) Это лишь одна из возможностей. Если увидишь разумное решение - отпиши, ок?

  6. Number One сказал:

    http://murphy.cz/victoria-s-vertical-centering/

    вот еще решение. с высотой правда, но зато без отрицательных маргинов.

  7. neutrino сказал:

    Думается мне что в Standards Compliance mode кросс-браузерно не будет работать.. Лень проверять :)

  8. Mavashi сказал:

    http://murphy.cz/victoria-s-vertical-centering/

    Красиво, но бесполезно… Редко, когда надо спозиционировать блок, у которого { height: 50%; width: 50%; }

  9. Lis сказал:

    сам блок position: relative;
    делайте у боди text-align: center; (ие)
    для фф, оперы итп : у блока margin: 40% auto auto auto;
    Это правда центрирование только по горизонтали, но додумать уже можно)

Оставить ответ

Ссылки в тему

Варианты подписки