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 - соответственно половина ширины этого блока
}
Эта запись была опубликована в рубрике CSS. Вы можете следить за комментариями к этой записи.

Комментарии

  1. il написал:

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

  2. il написал:

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

  3. neutrino написал:

    :)

  4. Number One написал:

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

  5. neutrino написал:

    [quote comment="114"]ну ширина ладно, а что делать будем если высота не известна?[/quote]

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

  6. Number One написал:

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

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

  7. neutrino написал:

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

  8. Mavashi написал:

    [quote comment="116"]http://murphy.cz/victoria-s-vertical-centering/[/quote]
    Красиво, но бесполезно… Редко, когда надо спозиционировать блок, у которого { height: 50%; width: 50%; }

  9. Lis написал:

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

  10. Master написал:

    ну для центрирования по горизонтали достаточно простого align=center в свойствах div-а))

  11. Alex написал:

    Спасибо огромное! You made my day!

  12. LLi написал:

    Чувак, огромное тебе человеческое спасибо, то что нужно!

Leave a Reply

Your email is never published nor shared. Required fields are marked *

*

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>