Как разместить div блок по центру страницы? Просто!
Верстка
Способов размещения блока в центре страницы не считанное количество, но большинство из них редкостное дерьмо, которое не отличается высокой кроссбраузерностью. Понадобилось сегодня написать один интересный скрипт, что привело к сборке следующего варианта размещения div блока в центре страницы. Пользуйтесь.
CSS:
<style type="text/css">
#centerDiv {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
}
</style>HTML:
<div id="centerDiv">content</div>
08.04.2013 01:43:27
admin
2487
10
Комментарии
Семён
11.04.2013 23:58:32
11.04.2013 23:58:32
блин, это все наверное все должны знать, с заданной высотой и позиционированием - это как раз не совсем кроссбраузерность, да и вообще позиционирование необходимо применять только когда другими способами уже никак...
P.S. Очень часто бывает проблема с размещение блока по центру без заданных размеров
. вот тогда приходится подумать)
P.S. Очень часто бывает проблема с размещение блока по центру без заданных размеров
. вот тогда приходится подумать)
Семён, как бы то ни было. Проверено у себя в ff/opera/chrome/ie. + через browsershots прогонял. Работает за малым исключением почти в 100% случаев... так чем тогда не кроссбраузерность? )
Во всяком случае, для меня на данный момент то что работает у ~99% пользователей интернета - отлично.
Ясно дело что блок с жёстко указанными параметрами проще всего разместить в центре страницы. :)
Во всяком случае, для меня на данный момент то что работает у ~99% пользователей интернета - отлично.
Ясно дело что блок с жёстко указанными параметрами проще всего разместить в центре страницы. :)
lerr
16.04.2013 20:19:39
16.04.2013 20:19:39
Можно обойтись одной строчкой margin: 0 auto;
lerr, это для размещения блока по центру(горизонтально), но вертикально он будет прижат к верхней границе.
В статье же речь о центре странице... как по вертикали так и по горизонтали.
В статье же речь о центре странице... как по вертикали так и по горизонтали.
Семён
10.05.2013 19:28:43
10.05.2013 19:28:43
Можно обойтись одной строчкой margin: auto auto;
Семён, ты перед тем как написать это не пробовал проверить работоспособность ? :)
lerr
18.05.2013 20:31:56
18.05.2013 20:31:56
Стик, помоги с одним вопросом. Всегда использовал DLE и там очень удобно выводить содержимое shortstory и fullstory. А как это реализовать в вордпресс? Например в категории нужно чтоб отображался тайтл и тумба, а в полной новости чтоб тумба не отображалась а только ролик
lerr, я бы с радостью тебе помог, но увы..
С dle я немного работал, потому знаю там про shortstory и fullstory, а вот с wp я вообще сталкивался только у себя на локале, исключительно чтобы посмотреть функционал. Не люблю сторонние cms.
С dle я немного работал, потому знаю там про shortstory и fullstory, а вот с wp я вообще сталкивался только у себя на локале, исключительно чтобы посмотреть функционал. Не люблю сторонние cms.
Molodya
22.05.2013 21:36:18
22.05.2013 21:36:18
stk, не планируешь создать аналог fsl.cs, только по ксгоу
Molodya, не уверен, но всё может быть. Для этого нужно огромное количество свободного времени, а у меня его на данный момент совсем нет.