Има няколко възможности за вертикално подравняване на обекти с помощта на CSS, но понякога е трудно да се избере най-доброто решение. Аз ще ви разкажа за най-добрите варианти, както и за това, как да създадете малък сайт центрирано.
Не е толкова лесно да се приложи вертикално центриране с CSS. Има някои опции, които може да не работят в някои браузъри. Нека да разгледаме 5 различни начина за извършване на вертикалното подравняване на обекти на най-професионално и детайлно ниво.
Този метод е предназначен да означава определена Разделение - как да масата. Следователно, можем да зададем центриране във вертикално подравняване атрибут (вертикално подравняване) на самата таблица (както с различните елементи работят по различен начин).
минуси
→ Няма да работи в Internet Explorer (дори 8 бета)
→ Объркване маркери (което не е толкова лошо, но това е чисто личен въпрос)
Този метод използва абсолютно позициониране (позиции: абсолютно) DIV, където показалеца на връх ще бъде равна на 50%, а горната допустимо отклонение е отрицателен половината от височината на съдържанието. Това означава, че височината на обекта трябва да има определен брой, който ще бъде определен в CSS.
Тъй като височината е фиксирана, вероятно ще искате да зададете автоматична препълване (преливане: авто) за Разделение # съдържанието 96 и. Ако съдържанието би било твърде много, няма да има превъртане, вместо съдържанието излизат извън рамките на DIV # 96; и.
Goodies
→ Тя ще работи във всички браузъри
→ Не трябва да се създаде объркване в таговете
минуси
→ когато има загубени недостатъчни съдържание пространство. Както и да е, ако Разделение е в кодови страници тяло (тяло), и потребителят намалява прозореца на браузъра. Превъртете няма да се появи.
Използвайки този метод, ние ще вмъкнете Разделение на върха на блока на съдържание. За тази цел ние се посочи височината на 50%, а в долната част на толерантността е равна на изваждане на височината на съдържанието (долна граница: -contentheight). След това съдържанието ще бъдат показани на върха, и в края ще бъде в средата.
Goodies
→ Тя ще работи във всички браузъри
→ При липса на място (т.е., с намаляване на прозореца на браузъра), чието съдържание няма да бъдат отрязани - ще се превърта.
минуси
→ Можете да се тревожи само за това, че този метод изисква допълнително празен елемент (което не е толкова лошо, но това е чисто личен въпрос).
Този метод използва абсолютната позициониране (позиции: абсолютен); Разделение с фиксирана височина и ширина. След Разделение # 96; у е дефинирана да се простират от върха до дъното (горе: 0; отдолу: 0), но това не е възможно, тъй като тя е с фиксирана височина. Ето защо, на толерантността се настройва автоматично (марж: авто), което разпространява съдържанието в центъра. Това е подобно на когато толерансът е настроен на 0 автоматично (марж: 0 авто) за съдържание на блок в центъра хоризонтално.
Goodies
→ Много е лесно да се приложи
минуси
→ Няма да работи в Internet Explorer (но работи с 8 бета)
→ При липса на място, съдържанието ще бъде нарязано и няма да се появи превъртане.
Този метод ще постави в центъра на един-единствен ред от текста. Просто посочете височината на линия (линия височина) за височината на обекта и текстът ще бъде поставен точно в центъра.
Goodies
→ Работи във всички браузъри
→ При липса на място не се съкрати съдържанието на
минуси
→ Работи само с текст (не се предлага с блокови елементи)
→ неточно отрязани с помощта на един ред (както в линиите за трансфер)
Такъв метод е много подходящ за по-малки елементи, например, ако в текста не центриран в бутона или областта на един ред от текста.
Така че кой метод да избера?
Моят любим опция номер 3 - използването на плаващи съдържание. Този вариант няма никакви съществени недостатъци. Тъй като този вариант осигурява две предимства наведнъж: можете да поставите други елементи в горната част на съдържанието, както и с намаляване на съдържанието на прозорец в центъра няма да засенчи останалите елементи.
Сега, че знаете как да се справят с него. Да започнем да се създаде малък, но интересен сайт. След приключване на проекта ви ще изглежда така:
Би било хубаво да се започне с семантично маркиране. Това е за структурата на нашата страница:
#floater
#centred
#side
#logo
#nav
#content
#bottom
По-нататък се използва XHTML-код:
Сега малко работа на Cascading Style Sheets (CSS) е нашата страница. Поставете този код в текстов файл и да го дадете име styles.css, на него ще лекува нашата страница, чрез специален ред в HTML-код.
Преди да се определи съдържанието на сайта центриран вертикално, тялото (тяло) в кода на страницата да се удължи до 100% ръст. Тъй като това е индикация за височината на запълване вътре и толерантността, която дадохме на стойност, равна на нула, което означава, че скролирането не трябва да се яви.
Pointer толерантност дъното на плаващ обект "долна граница" трябва да бъде половината от височината на съдържанието, което е -200px, ако височината съдържание 400px.
Трябва да се получи нещо като това:
Ширина "центриран» (#centered) елемент е равна на 80%. Това е да се гарантира, че вашият сайт е малко по малки дисплеи, както и чудесно за големи дисплеи (на моя сравнително голям монитор много стари сайтове изглеждат малки блокове в горния ляв ъгъл, и това е малко досадно). Това е по-известно като - плаващ маркиране. Просто укажете минимална и максимална ширина (мин-ширина / макс ширина), за да се гарантира, че сайтът не стане прекалено голяма или прекалено малка. Въпреки, че Internet Explorer не поддържа тези атрибути. Очевидно е, че вместо да ги посетите, трябва да избере фиксирана ширина.
Тъй като ширината "центриран» (#centered) елемент има относително позициониране (позиция: относителна), можем да използваме абсолютното позициониране в нея, за организиране на елементи. За съдържание (#content) се използва за автоматично преливане атрибут (препълване: авто), така че да превъртате ще се появи, ако не е съдържанието елементи се вписват в него. Internet Explorer няма да приеме преливане атрибут: авто толкова дълго, колкото ние не определите височината (не само позицията на дъното и на върха, а не в проценти), така че ние ще направим така, както се изисква.
Последното нещо, което трябва да направите е да добавите малко стил към страницата ни изглежда малко по-хубав. Нека започнем с менюто.
Когато промяната на обичайното списъка в менюто, кърлежи марки трябва да бъдат премахнати на първо място, като се използва атрибут списък стил: няма, както и да премахне всички валидни уплътнение и запълване на клетките. Ако искате да използвате меню отстъп или допълнително пълнене на клетката, се уверете, че сте посочили точно това, което ви трябва. Не го оставяйте браузър по подразбиране, тъй като стойностите на различни браузъри могат да се различават един от друг.
Следващото нещо, което не трябва да се пренебрегва, е връзките с индикация на дисплея като блоков елемент. По този начин, че да заемат цялата линия напълно и ще ви даде много по-голям контрол. Ако искате да направите хоризонтално меню, най-доброто нещо е да се направи плава.
И последната стъпка е да направи няколко допълнения към УСВ към страницата ни отне по-приятен външен вид.
Малка бележка за заоблени ъгли центриран съдържание. В CSS3 атрибут трябва да бъде «граничен радиус», чрез които можете да определите радиуса на кривата на ъглите. Той няма да бъде приложена в основни браузъри, стига да не използвате цифров приемник или -moz -webkit (за Mozilla Firefox или Safari / Webkit)
Полезни бележки
Вие познахте, Internet Explorer - това е единственият браузър, който натоварва ви различни предизвикателства:
* В плаващия елемент трябва да бъдат посочени ширина, или няма да се навсякъде във всяка версия на браузъра.
* 6-та версия на браузъра оставя твърде много пространство около нашето меню, което го нарушава.
Свързани статии