Naudokite CSS, kad centruotumėte dokumentą su fiksuoto pločio išdėstymu

Fiksuoto pločio išdėstymą gali būti sunku sutelkti su kai kuriomis populiariomis naršyklėmis, tačiau tai įmanoma, turint tik kelias kodo eilutes.

Čia kaip

  1. Savo HTML redaktoriuje sukurkite naują tinklalapį su CSS stiliaus lentele.
  2. Sukurkite div elementą kaip pagrindinį elementą puslapyje, kuriame bus saugomi visi puslapyje esantys elementai.
  3. Suteikite šį div elementą ID, kuris yra unikalus puslapyje.
  4. Atidarykite CSS stiliaus lapą ir nustatykite savo div elemento plotį. div # main (width: 750px; }
  5. Pridėkite automatines paraštes, kad centruotumėte savo div. div # main (width: 750px; margin-left: auto; marža-dešinė: auto}
  6. Norėdami ją išspręsti "Netscape 4" ir "IE 4 - 6" (" quirks" režimas ), prie kūno pridėkite tekstą. kūnas {text-align: center; }
  7. Bet tada visas tekstas viduje yra centre, todėl iš naujo suderinkite tekstą su savo #main div, pridedant teksto išlyginimo: kairėje; ten. div # main (width: 750px; margin-left: auto; atsarginė pusė: automatinė; text-align: left; }
  8. Išsaugokite savo puslapį ir savo stiliaus lapą.
  9. Bandykite keliose interneto naršyklėse.

Patarimas

Tai centruos išdėstymo laukelį, bet ne jo turinį. Naudodamiesi teksto lygiu, centruokite vidinį turinį.