[CSS/DIV] Перфектно решава хоризонталното центриране на CSS страници

Често използван CSS метод за хоризонтално центриране на елементи

Центрирането на елементи с CSS не е тривиален въпрос – едни и същи легитимни CSS центриращи настройки се държат различно в различните браузъри. Нека започнем с няколко често срещани начина за хоризонтално центриране на елементи в CSS.

1. Центриране с автоматични полета

Предпочитаният начин да центрирате елементите хоризонтално в CSS е да използвате свойството margin — просто задайте свойствата margin-left и margin-right на auto. На практика можем да създадем контейнер div за тези елементи, които трябва да бъдат центрирани. Едно нещо, което трябва да се отбележи, е че ширината на контейнера трябва да бъде уточнена:

div#container{ margin-left:auto; margin-detable:auto; ширина: 168px; }

Този подход работи много добре в повечето големи браузъри, дори IE6 на Windows може да се показва правилно в стандартния си режим на съответствие. За съжаление, в по-ниските версии на IE тази настройка не постига центъриращ ефект. Така че, ако искате да използвате този метод в реален проект, уверете се, че версията на браузъра IE на потребителя не е по-ниска от 6.0.

Въпреки липсата на подкрепа, повечето дизайнери препоръчват да се използва този подход колкото е възможно повече. Този метод се счита и за най-правилния и разумен от всички методи за реализиране на центриране на елементно ниво с CSS.

2. Използвайте подравняване на текста, за да постигнете центриране

Друг начин да се постигне центриране на елементите е да се използва свойството text-align, да се зададе стойността на свойството като center и да се приложи към елемента на тялото. Това е трик до кост, но е съвместим с повечето браузъри, така че в някои случаи е естествено необходим.

Нарича се хак, защото този метод не прилага текстови свойства към текста, а към елемента, който е контейнерът. Това ни дава и допълнителна работа. След като създадем необходимите div-а за оформлението, трябва да приложим свойството text-align към тялото според следния код:

body{ text-align:center; }

Ще има ли проблеми след това? Всички потомци на тялото са центрирани.

Затова трябва да напишем друго правило, за да върнем текста към подразбирането по подразбиране вляво:

p{ text-align:left; }

Възможно е това допълнително правило да причини известни неудобства. Също така, браузър, който наистина следва стандарта, не променя позицията на контейнера, а само центрира текста в него.

3. Използвайте комбинация от автоматично подравняване на полетата и подравняване на текста

Тъй като методът за центриране на текстовото подравняване има добра обратна съвместимост, а автоматичният метод на попълване се поддържа и от повечето съвременни браузъри, много дизайнери използват комбинация от двете, за да максимизират поддръжката между различни браузъри за ефекта на центриране:

body{ text-align:center; } #container{ margin-left:auto; margin-detable:auto; граница: 1pxsolidred; ширина: 168px; text-align:left }

Но това винаги е трик и по никакъв начин не е перфектен. Все още трябва да напишем допълнителни правила за текста в центрирания контейнер, но поне изглежда добре в различни браузъри.

4. Решение с отрицателен външен марж

Решенията с отрицателни маржове далеч не са толкова прости, колкото добавяне на отрицателни маржове към елементите. Този метод изисква използването както на абсолютно позициониране, така и на техники с отрицателен марж.

Следва конкретният метод за реализация на тази схема. Първо, създайте контейнер с центрирани елементи и го позиционирайте абсолютно на 50% от левия ръб на страницата. По този начин лявото поле на контейнера ще започне от 50% от ширината на страницата.

След това задайте стойността на левия марж на контейнера на половината от отрицателната ширина на контейнера. Това ще фиксира контейнера в средата на хоризонталната посока на страницата.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; позиция:абсолютна; ляво: 50%; ширина: 760px; margin-ляво:-380px; }

Виж, без трикове! Макар това да не е предпочитаното решение, е добър начин да го направиш и е много универсален – изненадващо, дори не работи в NetscapeNavigator 4.x без проблеми, нали? Така че, ако искате най-широк спектър от поддръжка на браузъри, този метод ще бъде най-добрият избор.