Центриране означава CSS блок

По време на оформлението на уеб страници, доста често срещана задача на центриране блокове. Това може да бъде вертикално и хоризонтално центриране.

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

Да започнем с това се говори за хоризонтална за центриране. Най-популярната техника е, когато устройството е центрирана инсталиране на левия и десния размери марж в "Auto". Да предположим, че искаме да се приведе в блок с идентификатор = "контейнер" ширина 860px. В този случай, трябва да се напише CSS файл:

#container фон цвят: #EEE;
ширина: 860px;
марж: 0px автомобил;
>

Въпреки Т.Е. по-стари версии (5.0 например) не се подреждат блока в средата. Разбира се, тези древни браузъри никой не използва (1800 ми ден на посетители - само 1), но само в случай, по-добре да се направи това и са работили там :)

За да направите това, майка елемент, а именно, че в рамките на които ние центрирате нашия блок (обикновено майка елемент е тялото маркер), параметър е текст-приравни: център. В този случай, блок подравнен в центъра, обаче, и цялото му съдържание също са подравнени в центъра, и ние не се нуждаем. Ето защо, в рамките на тази единица, подравняването по подразбиране - текст-приравни: ляво.

#container фон цвят: #EEE;
ширина: 860px;
марж: 0px автомобил;
текст-приравни: ляво;
>

Има и друг начин за хоризонтална единица подравняване, въз основа на позиционирането. Както вероятно знаете, по подразбиране, всеки елемент блоков се притиска към левия ръб на майка елемент. Ето защо, за да се приведе в центъра на необходимост:

1. Задайте единица абсолютно позициониране

2. Преместете надясно до 50% от ширината на прозореца на браузъра

3. С помощта на отрицателен отстъп да го измести вляво от разстояние, равно на половината ширина на единица.

По този начин, устройството ще бъде в средата. За по-голяма яснота, вижте клипа по-долу:

CSS код, например:

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

Да предположим, че нашият блок #container, който искате да насочите в центъра, се намира в #wrap блок. Тогава кодът е както следва:

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

1. Задайте единица абсолютно позициониране

2. Преместете надясно с 50% до 50%. като по този начин да я сложите в горния ляв ъгъл на центъра на прозореца на браузъра.

3. С помощта на отрицателен отстъп го измести нагоре от разстояние, равно на половината от височината на блока и наляво, на разстояние, равно на половината ширина на блок.

По този начин, устройството ще бъде в центъра на уеб страницата.

Да кажем, че нашата височина 600px блок. добре и 860 пиксела ширина. След това кода на CSS ще бъде, както следва:

#container фон-цвят: # 559964;
позиции: абсолютен;
Горе: 50%;
левия: 50%;
марж-нагоре: -300px;
марж ляв: -430px;
височина: 600px;
ширина: 860px;
>

Надявам се да се разбере самия принцип.

Имате въпрос? Получете отговори на Форум за поддръжка

Аз ще бъда първият, който изглеждаше урок.

Ех. Второ =) наскоро се срещна с този проблем в IE, агония за дълго време)) Благодаря ви =)

Благодаря ви страница като маркер)))

Благодаря Ви много. Андрю, за новите уроци!

Просто ви благодаря, аз мисля, а не какво да се добави тук))

Благодаря ви за урока, само няколко дни преди taoe се опита да направи малко по-трудно, и временно отложено

И аз имам един проблем: на сайта Mozille Firefox не иска да се приведе в съответствие, се придържаше към лявата страна и всичко, нито едно от горните не помага (и по същия начин в Opera).

и защо не работи? - "ако искате да поставите устройството не е по отношение на прозореца на браузъра, както и, например, във връзка с друг блок от друг блок за това, което трябва да определи позицията: относителна;"

Благодаря ви много !! просто ГИГАНТ благодаря ти! Бог да ви благослови!

всичко е наред. но по някаква причина всички изображения се на мястото, само след опресняване на браузъра. Моля, кажете ми, защо се случва това?

Андрю, моля Ви добавете търсенето на сайта.