Много често задачата е да подравните блок в центъра на страницата / екрана и дори така, че без Java скрипт, без да задавате твърди размери или отрицателни отстъпи, и така че лентите за превъртане да работят за родителя, ако блокът надвишава размера си . В интернет има доста монотонни примери за това как да подравните блок към центъра на екрана. По правило повечето от тях се основават на едни и същи принципи.
По-долу са основните начини за решаване на проблема, техните плюсове и минуси. За да разберете същността на примерите, препоръчвам да намалите височината/ширината на прозореца с резултати в примерите на предоставените връзки.
Вариант 1: Отрицателен отстъп.
Позициониране блокизползвайки атрибутите отгоре и отляво с 50% и знаейки предварително височината и ширината на блока, задайте отрицателен марж, който е равен на половината от размера блок. Голям недостатък на тази опция е, че трябва да броите отрицателни отстъпи. Също така блокне се държи съвсем правилно, когато е заобиколен от ленти за превъртане - просто се отрязва, защото има отрицателни полета.
Родител (ширина: 100%; височина: 100%; позиция: абсолютна; горе: 0; ляво: 0; препълване: автоматично; ) .block (ширина: 250px; височина: 250px; позиция: абсолютна; горе: 50%; ляво : 50%; марж: -125px 0 0 -125px; img (максимална ширина: 100%; височина: автоматично; поле: 0 автоматично; граница: няма; ) )
Вариант 2. Автоматичен отстъп.
По-рядко срещан, но подобен на първия. За блокзадаваме ширината и височината, позиционираме атрибутите горе вдясно долу вляво на 0 и задаваме автоматичен марж. Предимството на тази опция е работещите ленти за превъртане родител, ако последният има 100% ширина и височина. Недостатъкът на този метод е твърдата настройка на размерите.
Родител (ширина: 100%; височина: 100%; позиция: абсолютна; горе: 0; ляво: 0; препълване: автоматично; ) .block (ширина: 250px; височина: 250px; позиция: абсолютна; горе: 0; дясно: 0; отляво: 0; макс. ширина: 100%; дисплей: блок; поле: 0; граница: няма;
Вариант 3. Таблица.
Да питаме родителтаблица стилове, клетка родителЗадайте подравняването на текста в центъра. А блокзадаваме модела на линейния блок. Недостатъците, които получаваме, са неработещи ленти за превъртане и като цяло естетиката на „емулацията“ на таблицата не е добра.
Родител ( ширина: 100%; височина: 100%; дисплей: таблица; позиция: абсолютна; горе: 0; ляво: 0; > .inner ( дисплей: клетка-таблица; подравняване на текст: център; вертикално подравняване: среда; ) ) .block ( дисплей: inline-block; img ( дисплей: блок; рамка: няма; ) )
За да добавите свитък към този пример, ще трябва да добавите още един елемент към дизайна.
Пример: jsfiddle.net/serdidg/fk5nqh52/3.
Вариант 4. Псевдоелемент.
Тази опция е лишена от всички проблеми, изброени в предишните методи, и също така решава първоначалните проблеми. Въпросът е в това родителзадайте стилове псевдо елементпреди, а именно 100% височина, централно подравняване и вграден блоков модел. Същото е и с блокпоставен е центриран линеен блоков модел. до блокне "попадна" под псевдо елемент, когато размерите на първия са по-големи от родител, посочете родител white-space: nowrap и font-size: 0, след което блокотменете тези стилове със следното - бяло пространство: нормално. IN в този пример font-size: 0 е необходим, за да се премахне полученото пространство между родителИ блокпоради форматирането на кода. Пространството може да бъде премахнато по други начини, но се счита за най-добре просто да се избягва.
Родител (ширина: 100%; височина: 100%; позиция: абсолютна; горе: 0; ляво: 0; препълване: автоматично; бяло пространство: nowrap; подравняване на текст: център; размер на шрифта: 0; &:before ( височина: 100%; вертикално подравняване: ""; изображение: няма;
Или, ако искате родителят да заема само височината и ширината на прозореца, а не цялата страница:
Родител (позиция: фиксирана; отгоре: 0; отдясно: 0; отдолу: 0; отляво: 0; препълване: автоматично; бяло пространство: nowrap; подравняване на текст: център; размер на шрифта: 0; &:before (височина: 100%; дисплей: вграден блок; вертикално подравняване: съдържание: ""; граница: няма;
Вариант 5. Flexbox.
Един от най-простите и елегантни начини е да използвате flexbox. Не изисква излишни движения на тялото, доста ясно описва същността на случващото се и е много гъвкав. Единственото нещо, което си струва да запомните при избора този метод- поддръжка на IE от версия 10 включително. caniuse.com/#feat=flexbox
Родител (ширина: 100%; височина: 100%; позиция: фиксирана; горе: 0; ляво: 0; дисплей: гъвкав; подравняване на елементи: център; подравняване на съдържание: център; оправдаване на съдържание: център; преливане: автоматично; ) .block (фон: #60a839; img (дисплей: блок; рамка: няма; ))
Вариант 6. Трансформирайте.
Подходящо, ако сме ограничени от структурата и няма начин да манипулираме родителския елемент, но блокът трябва да бъде подравнен по някакъв начин. CSS ще дойде на помощ функция за превод(). На стойност 50% абсолютно позициониранеще позиционира горния ляв ъгъл на блока точно в центъра, тогава отрицателна стойност на превод ще премести блока спрямо собствените му размери. Моля, обърнете внимание, че могат да се появят отрицателни ефекти под формата на замъглени ръбове или стил на шрифта. Също така, този метод може да доведе до проблеми с изчисляването на позицията на блока с помощта на java-script, понякога за компенсиране на загубата на 50% от ширината поради използвайки cssЛявото свойство може да бъде подпомогнато от правилото, определено за блока: margin-right: -50%; .
Родител (ширина: 100%; височина: 100%; позиция: фиксирана; отгоре: 0; отляво: 0; препълване: автоматично; ) .block (позиция: абсолютна; отгоре: 50%; отляво: 50%; трансформация: превод( -50%, -50%); img (дисплей: блок;)
Вариант 7. Бутон.
Потребителска опция къде блокрамкирано в етикет с бутон. Бутонът има свойството да центрира всичко, което е вътре в него, а именно елементите на inline и block-line (inline-block) модела. На практика не препоръчвам да го използвате.
Родител (ширина: 100%; височина: 100%; позиция: абсолютна; горе: 0; ляво: 0; препълване: автоматично; фон: няма; рамка: няма; контур: няма;) .block ( дисплей: вграден блок; img (дисплей: блок; граница: няма; ))
Бонус
Използвайки идеята за 4-та опция, можете да зададете външни полета за блок, а последният ще бъде адекватно показан, заобиколен от ленти за превъртане.Пример: jsfiddle.net/serdidg/nfqg9rza/2.
Можете също да подравните изображението към центъра и ако изображението е по-голямо родител, мащабирайте го според размера родител.
Пример: jsfiddle.net/serdidg/nfqg9rza/3.
Пример с голяма снимка:
Подравнете текста вертикално в CSS- много трудна работа. Виждал съм достатъчно хора да се борят с това, че продължавам да откривам „критични“ грешки, когато става въпрос за действителния отзивчив дизайн.
Но не се страхувайте: ако вече се борите с вертикалното подравняване на CSS, попаднали сте на правилното място.
Нека поговорим за свойството за вертикално подравняване на CSS
Когато за първи път започнах да работя в уеб разработката, имах затруднения с това свойство. Мислех, че трябва да работи като класически имот" подравняване на текст" Ех, само ако всичко беше толкова просто...
вертикално подравняване на CSS свойствоработи чудесно с таблици, но не и с div или други елементи. Когато го използвате върху div, той подравнява елемента спрямо други div, но не и съдържанието му. В този случай свойството работи само с display: inline-block; .
Вижте пример
Искаме да центрираме съдържанието, а не самия div!
Имате два варианта. Ако имате само елементи div с текст, тогава можете да използвате свойството line-height. Това означава, че трябва да знаете височината на елемента, но не можете да я зададете. По този начин вашият текст винаги ще бъде в центъра.
Истината за този подход CSS вертикално подравняванеима недостатък. Ако текстът е многоредов, тогава височината на реда ще бъде умножена по броя на редовете. Най-вероятно в този случай ще получите ужасно оформена страница.
Погледнете този пример
Ако съдържанието, което искате да центрирате, се състои от повече от един ред, тогава е по-добре да използвате таблица div. Можете също да използвате таблици, но това не е семантично правилно. Ако имате нужда от паузи за отзивчиви цели, по-добре е да използвате div елементи.
За да работи това, трябва да има родителски контейнер с display: table и вътре в нея - необходимо количествоколони, които искате да центрирате, като използвате display: table-cell и vertical-align: middle .
Вижте пример
Защо това работи с маркиране на таблица, но не и с div елементи? Защото редовете в таблицата са с еднаква височина. Когато съдържанието на клетка от таблица не използва цялото налично пространство за височина, браузърът автоматично добавя вертикална подложка, за да центрира съдържанието.
позиция собственост
Нека започнем с основите на вертикалното подравняване на CSS div:
- позиция: статичната е по подразбиране. Елементът се изобразява според HTML реда;
- позиция: абсолютна - използва се за определяне на точната позиция на даден елемент. Тази позиция винаги е свързана с най-близкия относително разположен родителски елемент (не статичен). Ако не определите точната позиция на даден елемент, ще загубите контрол над него. Ще се появи на случаен принцип, напълно игнорирайки потока на документа. По подразбиране елементът се показва в горния ляв ъгъл;
- позиция: относителна - използва се за позициониране на елемент спрямо него нормално положение(статичен). Тази стойност запазва реда на документния поток;
- позиция: фиксирана - използва се за позициониране на елемента спрямо прозореца на браузъра, така че винаги да се вижда в прозореца за изглед.
Забележка: някои свойства ( отгоре и z-индекс) работят само ако елементът е настроен на позиция (не статичен).
Да се заемем с работата!
Искате ли да приложите CSS подравняванецентриран вертикално? Първо създайте елемент с относителна позиция и размери. Например: 100% по ширина и височина.
Втората стъпка може да варира в зависимост от целевите браузъри, но можете да използвате една от двете опции:
- Старо свойство: трябва да знаете точния размер на прозореца, за да премахнете половината ширина и половината височина. Вижте пример;
- Ново свойство на CSS3: Можете да добавите свойство за трансформация със стойност на превод от 50% и блокът винаги ще бъде в центъра. Вижте пример.
По принцип, ако искате да центрирате съдържанието, никога не използвайте горната част: 40%или ляво: 300px. Това работи добре на тестови екрани, но не е центрирано.
Запомнете позицията: фиксирана? Можете да направите същото нещо с него като с абсолютна позиция, но нямате нужда от относителна позиция за родителския елемент - той винаги ще бъде позициониран спрямо прозореца на браузъра.
Чували ли сте за спецификацията на flexbox?
Можете да използвате flexbox. Това е много по-добро от всеки друг вариант подравнете текст към CSS центървертикално. С flexbox управлението на елементи е като детска игра. Проблемът е, че трябва да отхвърлите някои браузъри като IE9 и версиите по-долу. Ето пример как да центрирате вертикално блок:
Вижте пример
Използвайки оформление на flexbox, можете да центрирате множество блокове.
Ако приложите наученото от тези примери, можете да овладеете CSS вертикално подравняване на блоковевъзможно най-скоро.
Връзки и допълнително четене
Изучаване на CSS маркиране
FlexBox Froggy
Пясъчник Flexbox
Превод на статията “ CSS вертикално подравняване за всеки (включени манекени)” е подготвен от приятелския екип на проекта.
Когато оформяте страница, често е необходимо да извършите центриране по метода CSS: например центриране на основния блок. Има няколко варианта за решаване на този проблем, всеки от които рано или късно трябва да се използва от всеки дизайнер на оформление.
Централно подравняване на текста
Често за декоративни цели е необходимо да зададете подравняване на текста към центъра; в този случай CSS ви позволява да намалите времето за оформление. Преди това се правеше с помощта на HTML атрибути, но сега стандартът изисква подравняване на текста с помощта на таблици със стилове. За разлика от блоковете, за които трябва да промените полетата, в CSS центрирането на текст се извършва с помощта на един ред:
- подравняване на текст: център;
Това свойство се наследява и предава от родителя на всички потомци. Засяга не само текста, но и други елементи. За да направите това, те трябва да са вградени (например span) или inline-block (всички блокове, които имат зададено свойство display: block). Последната опция също ви позволява да променяте ширината и височината на елемента и да регулирате отстъпите по-гъвкаво.
Често на страниците подравняването се присвоява на самия таг. Това веднага прави кода невалиден, тъй като W3C е отхвърлил атрибута align. Използването му на страница не се препоръчва.
Подравняване на блок към центъра
Ако трябва да зададете подравняване на divцентрирано, CSS може да предложи доста удобен начин: използвайте външни полета. Отстъпите могат да се задават както за блокови елементи, така и за вградени блокови елементи. Стойността на свойството трябва да бъде 0 (вертикална подложка) и auto (автоматична хоризонтална подложка):
- margin:0 auto;
Сега тази опция се признава за абсолютно валидна. Използването на външни подложки също ви позволява да настроите изображението да бъде центрирано: това ви позволява да разрешите много проблеми, свързани с позиционирането на елемент на страницата.
Подравнете блок отляво или отдясно
Понякога централното подравняване на CSS не се изисква, но трябва да поставите два блока един до друг: единият в левия край, другият вдясно. За тази цел има свойство float, което може да приема една от трите стойности: left, right или none. Да приемем, че имате два блока, които трябва да бъдат поставени един до друг. Тогава кодът ще бъде така:
- .left (float:left;)
- .right(float:right)
Ако има и трети блок, който трябва да се намира под първите два блока (например долен колонтитул), тогава трябва да му се даде свойството clear:
- .left (float:left;)
- .right(float:right)
- долен колонтитул (изчистване: и двете)
Факт е, че блокове с класове ляво и дясно изпадат от общия поток, тоест всички останали елементи игнорират самото съществуване на подравнени елементи. Свойството clear:both позволява на долния колонтитул или който и да е друг блок да вижда елементи, които са изпаднали от потока, и забранява float отляво и отдясно. Следователно в нашия пример долният колонтитул ще се премести надолу.
Вертикално подравняване
Има моменти, когато не е достатъчно да зададете централно подравняване с помощта на CSS методи; трябва също да промените вертикалната позиция на дъщерния блок. Всеки вграден или вграден блоков елемент може да бъде вложен в горния или долния край, в средата на родителския елемент или на всяко място. Най-често блокът трябва да бъде подравнен към центъра; за това се използва атрибутът vertical-align. Да кажем, че има два блока, единият вложен в другия. В този случай вътрешният блок е inline-block елемент (показване: inline-block). Трябва да подравните дъщерния блок вертикално:
- подравняване отгоре - .child(vertical-align:top);
- централно подравняване - .child(vertical-align:middle);
- подравняване отдолу - .child(vertical-align:bottom);
Нито подравняването на текста, нито вертикалното подравняване засягат блоковите елементи.
Възможни проблеми с подравнени блокове
Понякога центрирането на div с помощта на CSS може да причини малко проблеми. Например, когато използвате float: да кажем, че има три блока: .first, .second и .third. Вторият и третият блок лежат в първия. Елементът с втори клас е подравнен вляво, а последният блок е подравнен вдясно. След изравняване и двете изпаднаха от потока. Ако родителският елемент няма зададена височина (например 30em), тогава той вече няма да се разтяга до височината на дъщерните си блокове. За да избегнете тази грешка, използвайте „спейсър“ – специален блок, който вижда .second и .third. CSS код:
- .second(float:left)
- .third(float:right)
- .clearfix(height:0; clear: и двете;)
Псевдокласът:after често се използва, което също ви позволява да върнете блоковете на мястото им чрез създаване на псевдоспейсър (в примера div с контейнерния клас се намира inside.first и съдържа.left and.right) :
- .left(float:left)
- .right(float:right)
- .container:after(content:""; display:table; clear:both;)
Горните опции са най-често срещаните, въпреки че има няколко варианта. Винаги можете да намерите най-простия и удобен начин за създаване на псевдодистанционер чрез експериментиране.
Друг проблем, с който дизайнерите на оформление често се сблъскват, е подравняването на вградени блокови елементи. След всеки от тях автоматично се добавя интервал. Свойството margin, което е зададено на отрицателен отстъп, помага да се справите с това. Има и други методи, които се използват много по-рядко: например нулиране В този случай font-size: 0 е записано в свойствата на родителския елемент. Ако има текст вътре в блоковете, тогава необходимият размер на шрифта вече е върнат в свойствата на вградените блокови елементи. Например font-size:1em. Този метод не винаги е удобен, така че опцията с външни отстъпи се използва много по-често.
Подравняването на блокове ви позволява да създавате красиви и функционални страници: това включва оформлението на цялостното оформление, подреждането на продуктите в онлайн магазините и снимките на уебсайта на визитната картичка.
Добър ден, абонати и читатели на тази публикация. Днес искам да навляза в подробности и да ви кажа как да центрирате текст в CSS. В някои предишни статии косвено засегнах тази тема, така че имате известни познания в тази област.
Въпреки това, в тази публикация ще ви разкажа за всички различни начини за подравняване на обекти, а също така ще обясня как да правите отстъпи и червени линии на абзаци. И така, нека започнем да учим материала!
HTML и неговите потомци и подравнете
Този метод почти никога не се използва, тъй като е заменен от каскадни стилови инструменти. Но да знаете, че такъв етикет съществува, няма да ви навреди.
Относно валидирането ( този сроке описано подробно в статията ""), тогава самата html спецификация осъжда използването < център>, тъй като за валидност е необходимо да се използва транзитив DOCTYPE>.
Този типпозволява преминаването на забранени елементи.
Сега да преминем към атрибута подравнете. Той задава хоризонталното подравняване на обектите и се вписва след декларацията на етикета. Обикновено може да се използва за подравняване на съдържание отляво ( наляво), по десния край ( точно), центрирано ( център) и по ширина на текста ( оправдавам).
По-долу ще дам пример, в който ще поставя картината и абзаца в центъра.
Това съдържание ще бъде центрирано.
Моля, обърнете внимание, че за изображението атрибутът, който анализираме, има малко по-различни значения.
В примера, който използвах подравняване="средата". Благодарение на това изображението беше подравнено така, че изречението да е разположено ясно в средата на картината.
Инструменти за центриране в css
Свойствата на CSS, предназначени за подравняване на блокове, текстово и графично съдържание, се използват много по-често. Това се дължи преди всичко на удобството и гъвкавостта на внедряването на стилове.
Така че нека започнем с първото свойство на центрирането на текста - това е текст-подравнете.
Функционира по същия начин като align in . Сред ключовите думи можете да изберете една от общия списък или да наследите характеристиките на предшественик ( наследяват).
Бих искал да отбележа, че в css3 можете да зададете още 2 параметъра: започнете– в зависимост от правилата за писане на текст (отдясно наляво или обратно), задава подравняването наляво или надясно (подобно на работата наляво или надясно) и край– обратното на начало (при писане на текст отляво надясно действа като дясно, при писане отдясно наляво – ляво).
Изречение вдясно
Изречение с край
Ще ви разкажа за един малък трик. При избор на стойност оправдавампоследният ред може да виси непривлекателно отдолу. За да го позиционирате например в центъра, можете да използвате имота текст-подравняване-последно.
За да подравните вертикално съдържанието на сайта или клетките на таблицата, използвайте свойството вертикално подравняване. По-долу съм описал основните ключови думиелемент.
| Ключова дума | Цел |
| базова линия | Указва подравняване към предшестваща линия, наречена базова линия. Ако обектът-предшественик няма такава линия, тогава подравняването се извършва по долната граница. |
| средата | Средата на мутиралия обект е подравнена спрямо основната линия, към която се добавя етажът на височината на родителския елемент. |
| отдолу | Долната част на избраното съдържание се настройва спрямо долната част на обекта под него. |
| отгоре | Подобно на дъното, но с горната част на обекта. |
| супер | Прави знака горен индекс. |
| суб | Прави елемента долен индекс. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
В INд ТЗАДО
|
Вдлъбнатини
И накрая стигаме до отстъпите на параграфите. Езикът CSS използва специално свойство, наречено текст-отстъп.
С негова помощ можете да направите както червена линия, така и издатина (трябва да посочите отрицателна стойност).
За да създадете червена линия, трябва да знаете само един параметър.
Това е простото свойство за отстъп на текст.
Похвалявам тези, които опитаха всеки пример на практика. Изпратете връзки към моя блог на вашите приятели и не забравяйте да се абонирате. Успех! Чао чао!
С най-добри пожелания, Роман Чуешов
Прочетете: 675 пъти
Оформлението и централното подравняване на страниците на уебсайта е творческо начинание и често създава затруднения на начинаещите. Така че нека да видим как да го направим. Да кажем, че искаме да направим страница със следната структура:
Нашата страница се състои от четири блока: заглавка, меню, съдържание и долен колонтитул. За да центрираме страницата, ще поставим тези четири блока в един основен блок:
Хедър на сайта
Съдържание
Долната част на сайта
Използвайки тази структура като пример, ще разгледаме няколко опции.
Оформление и центриране на гумена площадка
При оформянето на гумена площадка основната използвана единица за измерване е -%, тъй като площадката трябва да се простира по ширината и да заема цялото свободно пространство.
Следователно ширината на блоковете "header" и "footer" ще бъде 100% от ширината на екрана. Нека ширината на блока "меню" е 30%, а блокът "съдържание" трябва да бъде разположен до блока "меню", т.е. трябва да има ляво поле (margin-left) с ширина, равна на ширината на блока "меню", т.е. 30%.
За да направите блоковете "меню" и "съдържание" един до друг, нека направим блока "меню" плаващ и го бутнете до левия ръб. Ще зададем и фоновите цветове за нашите блокове. Сега нека напишем всичко това в листа със стилове (на страницата style.css)
#header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu(background:#6173cb; float :left; width:300px; text-align:center; #content(background:#ffffff; margin-left:30%; height:text-align:center; ) #footer(фон: #3e4982; ширина: 50 пиксела; цвят: размер на шрифта: 10 пиксела.
Височината на блоковете беше зададена условно, така че резултатът да е видим. Вижте нашата страница във вашия браузър:
Ако промените размера на прозореца на браузъра, ширината на всички блокове ще се промени. Това не винаги е удобно, защото... Когато блокът на менюто е разтегнат, се появява празно място. Следователно ширината на блока „меню“ често е фиксирана, така че нека направим същото. За да направите това, заменете стойностите на съответните свойства в листа със стилове:
... #menu( background:#6173cb; float:left; width:200px; height:300px; ) #content( background:#ffffff; margin-left:200px; height:300px; ) ...
Сега нашата страница се простира по-естествено. При плавно оформление страниците заемат цялата ширина на екрана, така че не е необходимо подравняване на страницата.
Но ако желаете, можете да накарате страницата си да има еднаква подложка отляво и отдясно на екрана. За да направите това, трябва да добавите стил към "основния" блок, който е контейнер за всички останали блокове:
Сега страницата ни изглежда така:
Оформление и центриране на обекта, фиксирана ширина
В този случай ще трябва да зададем фиксирани размери за нашите блокове:
#main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer(background:#3e4982; clear:both; width:50px; text-align:center; font- size:14px padding-top:10px;
Сега нашата страница е притисната до левия край на екрана.
В този случай централното подравняване на страниците на сайта може да се извърши по следния начин. Нека си припомним, че нашата страница има таг "body", на който също може да се даде ширина и малко подложка.
Нека направим това: дайте на тага "body" ширина от 800 пиксела (като "main" блок) и padding-left от 50%. Тогава цялото съдържание на "главния" блок ще се покаже от дясната страна на екрана (т.е. от средата надясно):
За да може нашият „главен“ блок да бъде разположен в средата на екрана, средата му трябва да съвпада със средата на тага „body“. Тези. трябва да преместите "основния" блок наляво с половината от неговия размер. Ширината на "главния" блок е 800 пиксела, което означава, че трябва да зададете свойството "margin-left:-400px" към него. Да, това свойство може да приема отрицателни стойности, тогава лявото поле се намалява (т.е. измества се наляво). И точно това ни трябва.
Сега стиловият лист изглежда така:
body( width:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; цвят: #FFFFFF; размер на шрифта: 40px; #menu(background:#6173cb; width:200px; height:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content(background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer(background:#3e4982; clear:both; width:800px;text-align:center;font-size:14px;
И нашата страница в браузъра се намира точно в средата:
Разгледахме две опции за центриране на страниците на сайта, всъщност те не са догма. Можете да експериментирате и да измислите своя собствена версия, просто проверете как работи в различни браузъри. За съжаление, това, което се показва добре във FireFox или Opera, може да се показва напълно неразбираемо в IE и обратно. И ние трябва да помним това.
Успех в творческите ви търсения!
