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 - соответственно половина ширины этого блока
}
This entry was posted in CSS. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

10 Responses to div valign-center

  1. il says:

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

  2. il says:

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

  3. Number One says:

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

  4. neutrino says:

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

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

  5. Number One says:

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

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

  6. neutrino says:

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

  7. Mavashi says:

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

  8. Lis says:

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

  9. Master says:

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

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>