чудо{вищные} заметки

Sorry for my terrible english. My native language is PHP.

center-vertically

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

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

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

Technorati Tags: , , ,

Реклама

Октябрь 13, 2006 - Posted by | css, dev, web

6 комментариев »

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

    комментарий от Orange | Ноябрь 26, 2006

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

    комментарий от Orange | Ноябрь 26, 2006

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

    комментарий от MiRacLe | Ноябрь 27, 2006

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

    Hello World

    комментарий от clops | Декабрь 12, 2006

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

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

    комментарий от clops | Декабрь 12, 2006

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

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

    комментарий от MiRacLe | Декабрь 12, 2006


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: