Как да центрирате един сайт - как да центрирате уебсайт с помощта на CSS

Как да центрирате сайт с CSS

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

На първо място, трябва да нулирате браузъри за разстояние подразбиране. Всеки браузър е с вградени в стила на маса, които се зареждат автоматично и са в основата на всички други стилове. Ние от Firefox, например, стойността на маржин подразбиране за тялото маркер е равно на 8 пиксела. По-долу е най-лесният начин да нулирате всички стойности за този пример.

Бих искала да отбележа, че има по-разширени опции за облекчение, но за този урок ще бъде достатъчно и това.

Ще използвам за този урок слой с идентификатор "обвивка". Можете да посочите всякаква ширина (но не забравяйте да се разширява на посетителите си монитори). Реших да направя с ширина от 960 пиксела, което е подходящо за резолюции по-високи от средните (1024? 768). По-долу можете да видите структурата на страницата:

Да започнем с това, ние присвоите слой стил #wrapper, който ще го центрирате в браузъра. Това се прави с помощта на границата на параметър. Не забравяйте да посочите ширина #wrapper слой или елемент не е в центъра. Трудно е да се център, който заема 100% от ширината. За удобство на теста трябва също така да се определи различна цвета на фона и височина на #wrapper на слоя. Това ще ви помогне да видите резултата.

#wrapper ширина: 960 пкс;
марж: 0 автомобил;
>

Тъй като Internet Explorer не е толкова прост. За правилния резултат ние трябва да добавите следния стил (трябва да се приведе в съответствие текст в центъра, за да се приведат в центъра на слоя в Internet Explorer):

тяло текст подравняване: център; / * За IE6 щуротии * /
>

маркер за включва обвивка, а следователно и подравняването на текста се предава на него. Обикновено това е необходимо, че текстът остана, така че ние трябва да добавите това състояние стил #wrapper:

#wrapper ширина: 960 пкс;
марж: 0 автомобил;
текст-приравни: ляво;
>

Всички - ние сме готови! Този малък блок на CSS ще ви помогне да се приведе в съответствие всеки сайт, само настроите ширината за себе си. Целият код изглежда така:

*<
марж: 0;
подложка: 0;
>
тяло<
текст-приравни: център; / * За IE6 щуротии * /
>

#wrapper<
ширина: 960 пкс;
марж: 0 автомобил;
текст-приравни: ляво;
>