Cum de a centra un site web - cum să centru pe un site folosind css

Cum de a centra un site cu CSS

Centrarea este site-ul principal de multe machete CSS. Există mai multe metode și tehnici ale acestui diferite, dar în acest tutorial am să-ți spun despre o tehnică ce folosește doar CSS. Nu trebuie să se confrunte cu interes și site-ul dvs. va funcționa în toate browserele moderne.

În primul rând, trebuie să resetați browserele distanță prestabilită. Fiecare browser are un built-in stiluri de masă, care sunt încărcate în mod automat și sunt baza pentru orice alte foi de stil. Noi de Firefox, de exemplu, valoarea implicită pentru marja de tag-ul corpului este egală cu 8 pixeli. Mai jos este cel mai simplu mod de a reseta toate valorile pentru acest exemplu.

Observ că există mai multe opțiuni avansate pentru ajutor, dar pentru această lecție va fi de ajuns și că.

Voi folosi pentru acest strat lecție cu id-ul „înveliș“. Puteți specifica orice lățime (dar nu uitați să se extindă monitoarele de vizitatori). Am decis să fac o lățime de 960 de pixeli, care este potrivit pentru rezoluții mai mari decât media (1024? 768). Mai jos puteti vedea structura paginii

Pentru început, vom atribui stilul #wrapper strat, care se va centra în browser. Acest lucru se face cu ajutorul marjei de parametru. Nu uitați să specificați stratul de lățime #wrapper sau elementul nu este centrat. Este dificil de centru care ocupă 100% din lățimea. Pentru comoditatea testului trebuie să alocați, de asemenea, o culoare de fundal și înălțimea diferită a #wrapper stratului. Acest lucru va ajuta să vedeți rezultatul.

latime #wrapper: 960 x;
margin: 0 auto;
>

Deoarece Internet Explorer nu este atât de simplu. Pentru rezultatul corect trebuie să adăugați următorul stil (trebuie să se alinieze textul în centru, în scopul de a alinia centrul stratului în Internet Explorer):

corp text-align: center; / * Pentru IE6 Păcăleală * /
>

tag-ul corpului include învelișul, și, prin urmare, alinierea textului este trecut pe el. De obicei, este necesar ca textul a fost lăsat, așa că trebuie să adăugați această condiție stil #wrapper:

latime #wrapper: 960 x;
margin: 0 auto;
text-align: left;
>

Toate - am terminat! Acest mic bloc de CSS va ajuta să aliniați orice site, reglați numai lățimea pentru ei înșiși. Toate codul arată astfel:

*<
margin: 0;
padding: 0;
>
corp<
text-align: center; / * Pentru IE6 Păcăleală * /
>

#wrapper<
lățime: 960 x;
margin: 0 auto;
text-align: left;
>