При программировании сайтов — часто стоит вопрос: как отцентровать div (именно контейнер, а не то что в нём внутри) или сделать хотя бы его с динамическим отступом от левого края экрана. Как бы существуют всего лишь два способа: сделать table и внутри неё отцентровать div (c помощью таблицы). Но иногда, этот вариант не катит. Дабы, например table в css может быть предопределён и у вас всё просто разъедится. Почитал кучу инфы, где некоторые считают, что надо просто добавить DOCUTYPE и в CSS 0 px; auto;для DIV — бред, просто не работает. А ДИВ как был слева, так и остался. Пришлось почитать ещё — собственно, так ничего и не нашёл. Пришлось прибегать к методу научного тыка. Первым делом, решил попробовать комбинацию: position:absolute; left:15%; — заработало. DIV отъехал на 15% уже нормально. Сжимаю окно — двигается. Норм. И так, всё просто, главное, что это теперь работает! (Показано на фото вверху)
Центровка по левому краю в процентах:
centred — тот, кто центрирует wrapper
wrapper — контент
Для CSS:
#centred { margin: 0px auto 0px auto; text-align:center; z-index:1001; position:absolute; left:15%; }
#wrapper{ width:985px; min-width:1004px; z-index:1000; position:absolute; text-align:left; }В HTML:
<div id=»centred» align=»center»>
<div id=»wrapper» align=»left»>
Центровка DIV по центру экрана:
centred — тот, кто центрирует wrapper
wrapper — контент
Для CSS:
#centred { width:985px;margin: 0px auto; } /* Внутри контейнера — никаких z-index не надо */
#wrapper{ width:985px; min-width:1004px; z-index:1000; position:absolute; text-align:left; }В HTML:
<div id=»centred» align=»center»>
<div id=»wrapper» align=»left»>
Но самый идеальный вариант, который поддерживают все браузеры: HTML 5! Там все это есть, без «костылей» и заплаток! Именно, в html версии 5 решено куча проблем одной строкой.
Желаю всем удачи и хорошей вёрстки сайтов.