Изравняване блокове в центъра Разделение (CSS, HTML) Разделение

Изравняване блокове в центъра Разделение (CSS, HTML) Разделение

В тази статия ще обсъдим как да се сложи на DIV в средата. Има много начини, но не всички го правят възможно да се направи точно това, което се изисква. Давам пример за най-добрите и най-лесният начин.

Като цяло, има десетки начини за това как правилно да се приведе в съответствие Разделение блок в центъра, всеки уебмастър използва любимата си \ най-удобният начин. Въпреки това, има някои основни, най-популярният и гъвкав начин. И разбира се, същите кодове за всички съвременни стандарти.

И да, това е необходимо да кажа веднага, че тези методи може да не работят в IE6, или нещо подобно. Аз дори не обръщат внимание на този браузър, независимо от факта, колко много хора го използват. Време е да се отучат да използва втора употреба статии.

И така, какво имаме?

1. Метод за стръмните

А много ефективен метод, който освен това, също така ви позволява да се приведат в полетата в горната и долната част. Каква е функцията на метода? Толкова е просто до лудост. Имаме блок с определена ширина (в пиксели или процент), който с имот «авто» задават едни и същи тире на ляво и на дясно, в крайна сметка се получи DIV-блок в центъра на града. Първата стойност (0 в примера) - интервал от по-горе и по-долу.

Например, за да се приведе в началото напишете:

За да се приведе в горната и долната част:

По мое мнение - това е най-добрият начин да се приведе в съответствие блокове в средата. Освен това е напълно валиден.

Метод 2 Интерес

Ако устройството е с ширина в проценти, ние можем да се приведе в съответствие Разделение центриран прилагане равна подложка, за да продължи по цялата ширина на до 100%. Който не разбира, показват пример, това е по-лесно:

В момента има 50% от ширината на блока, за да се приведе в центъра, ние трябва да направим страничните граници на 25% от ляво и от дясно съответно. Радвайки се на кода:

Без да се напряга, получаване на блок в центъра, облицована тривиални математика (50 + 25 + 25) :)

Метод 3. Смесени

Метод 4 при използване на допълнително поле

Нито метод не решава проблема с поплавъка вътре в блока, когато ширината на блок със сигурност не е известна (например, менюта).

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