Наведемо кілька прикладів горизонтального центрування блоку на сторінці. C допомогою "margin: 0 auto;" і за допомогою негативних значень margin.
C допомогою margin: 0 auto;
Блок центрируется установкою розмірів правого і лівого margin в "auto". Це відмінний спосіб горизонтального центрування блоку засобами CSS. Він чудово працює в більшості браузерів, що підтримують CSS2. Але IE5 / Win не відреагує на це властивість, це недолік браузера, а не технічного прийому.
Це легко обходиться - IE5 / Win неправильно застосовує властивість "text-align" до елементів рівня блоку. Оголосимо "text-align: center" елементу, в якому центруємо блок (найчастіше це body) і проблема для IE5 / Win здавалося б вирішена. Побічний ефект цього трюку - успадкування властивостей "text-align" для inline-контенту. Відцентрувати блоку тепер оголосимо "text-align: left" і таким чином наведемо верстку в порядок.
Bот приклад центрування блоку за допомогою "margin: 0 auto;".
За допомогою від'ємного значення margin
Спершу лівий край блоку розміщуємо по центру за допомогою "position: absolute; left: 50%;". Потім значення лівого margin встановлюємо рівним половині ширини блоку і робимо його негативним: "margin-left: -266px;" .
Bот приклад центрування блоку за допомогою "margin: -100px;".
Розміри блоку не обов'язково повинні бути фіксованими. Можна їх задавати у відсотках, але при тому ж умови для "margin-left" тоді код буде таким:
Bот приклад центрування блоку за допомогою "margin: -20%;".
Використовуючи вищенаведені приклади і змінюючи значення margin зліва і справа можна розмістити блок не строго по-центру, а зміщуючи його вправо або вліво від центру.
Цікаво, як відцентрувати таблицю якщо вона не має фіксованої і процентної ширини?
Починаю облагороджувати код свого сайту. Переводити його на div-и, спрощувати, оптимізувати.
Пол дня провозився з центруванням картинки :)
Укладати її в div було абсолютно недоцільно! Адже це була звичайна img. яка повинна була стояти в центрі документа.
text-align: center до неї не застосовувався.
horizontal-align - теж немає.
align - немає.
Перепробував купу варіантів, різні DOCTYPE ...
Зрештою, плюнув, уклав в ... :)
Але ж так не хотілося плодити зайві сутності!
Це я все до того, що цей тег центрує. І все тут :) Ніяких CSS-ів на цю справу не потрібно.
2Victor Gr .:
якщо картинка, припустимо, знаходиться в
тоді пишемо в стилі css
div # center img
і картинка відцентрована.
void, не працює
24, спасибі, тепер проходить валідацію.
Для тих, хто не помітив - був відсутній fieldset і елементи форми (label, input ...) перебували тільки всередині form, а також одна br бовталася поза блочного елемента. Як документ XHTML1.1 сторінка не проходила валідацію.
Можна відразу вказати relative. а не обертати їм absolute.
Під стандарт XHTML 1.1 варіант з margin: auto стосовно таблиці не прокатав))), а була потрібна саме таблична верстка. Придумав так:
Крайні осередки не мають заданих значень, а ширина таблиці - 100%, таким чином центрування досягається за рахунок розширення лівої і правої осередків до потрібних величин. Кросбраузерності, валідність, підтримує і процентну і фіксовану ширину.
Блін, код не здався. Тоді ще раз, застосовуючи суті, замість кутових дужок:
| style = "width: потрібне значення в процентах або пікселях"> контент |
з горизонтальним центрированием виходить не все добре, в разі фіксованої ширини блоку. він йде за ліву межу екрану без скролінгу, при малому розмірі вікна. як би це обійти?
А є такий варіант. Створюється тарбліца, один рядок і три осередки. Правої і лівої задається ширина 50%. А центральна без розміру. І в міру її наповнення бічні будуть змінюватися симетрично.
Привіт, як мені відцентрувати меню сайту через css? зайдіть на мій сайт, і ви зрозумієте!
Заздалегідь вдячний