Нашёл (скомпилировал кучу чужих заметок по этому поводу) простой (и вроде кросс-браузерный) способ позиционирования блока известных размеров в центр окна браузера средствами css.

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

Задача по сути простая (сложнее когда размеры неизвестны), но всё равно стандартным решением всегда была таблица с кучей лишних ячеек по краям блока.
Отличие от других способов, которые удалось найти в интернете – предлагалось использовать в качестве половины размера использовать 25%, но я не нашёл у себя ни одного браузера, в котором бы это работало.

Technorati Tags: , , ,

center-vertically
Tagged on:

6 thoughts on “center-vertically

  • 26.11.2006 at 22:13
    Permalink

    нефига
    div.valign-center {
    position: absolute;
    width:300px;
    height:250px;
    top: 50%;
    left: 50%;
    margin-top: -125px; //где 300 – половина высоты блока
    margin-left: -150px; // 500 – соответственно половина ширины этого блока
    }
    Центральный блок

  • 26.11.2006 at 22:14
    Permalink

    весь html кастрировался так что просто скажу что не работает..

  • 27.11.2006 at 10:07
    Permalink

    А подробнее можно? в коммент попал только кусок css.
    А хотелось бы знать что за html и в каком браузере не работает?

  • 12.12.2006 at 13:19
    Permalink

    ну центрировать по-горизонтали очень просто

    Hello World

  • 12.12.2006 at 13:20
    Permalink

    странно что форма слопала все теги — не правильнее было бы их превратить в htmlspecialchars?

    [div style=”text-align: center”]
    [div style=”margin: 15% auto 0; width: 200px”]
    Hello World
    [/div]
    [/div]

  • 12.12.2006 at 17:23
    Permalink

    сей код выводит приветствие по “горизонтальному” центру, но не по вертикальному…(по крайней мере в тех браузерах, которые имеются в наличии), а я искал именно “геометрический центр браузера” ;o) .

    по поводу htmlspecialchars – это халявный блого-хостинг – работает и настраивается не мною…(а жаль)

Leave a Reply

Your email address will not be published. Required fields are marked *