Нашёл (скомпилировал кучу чужих заметок по этому поводу) простой (и вроде кросс-браузерный) способ позиционирования блока известных размеров в центр окна браузера средствами css.
div.valign-center {
position: absolute;
top: 50%;
left: 50%;
margin-top: -300px; //где 300 - половина высоты блока
margin-left: -500px; // 500 - соответственно половина ширины этого блока
}
Задача по сути простая (сложнее когда размеры неизвестны), но всё равно стандартным решением всегда была таблица с кучей лишних ячеек по краям блока.
Отличие от других способов, которые удалось найти в интернете – предлагалось использовать в качестве половины размера использовать 25%, но я не нашёл у себя ни одного браузера, в котором бы это работало.
Technorati Tags: web, dev, css, center-vertically
center-vertically
нефига
div.valign-center {
position: absolute;
width:300px;
height:250px;
top: 50%;
left: 50%;
margin-top: -125px; //где 300 – половина высоты блока
margin-left: -150px; // 500 – соответственно половина ширины этого блока
}
Центральный блок
весь html кастрировался так что просто скажу что не работает..
А подробнее можно? в коммент попал только кусок css.
А хотелось бы знать что за html и в каком браузере не работает?
ну центрировать по-горизонтали очень просто
Hello World
странно что форма слопала все теги — не правильнее было бы их превратить в htmlspecialchars?
[div style=”text-align: center”]
[div style=”margin: 15% auto 0; width: 200px”]
Hello World
[/div]
[/div]
сей код выводит приветствие по “горизонтальному” центру, но не по вертикальному…(по крайней мере в тех браузерах, которые имеются в наличии), а я искал именно “геометрический центр браузера” ;o) .
по поводу htmlspecialchars – это халявный блого-хостинг – работает и настраивается не мною…(а жаль)