[CSS / DIV] Puikiai išsprendžia CSS puslapio horizontalų centravimą

Įprastas CSS elementų centravimo horizontaliai metodas

Elementų centravimas naudojant CSS nėra nereikšmingas dalykas - tie patys teisėti CSS centravimo nustatymai skirtingose naršyklėse elgiasi skirtingai. Pradėkime nuo kelių įprastų būdų, kaip CSS elementus centruoti horizontaliai.

1. Centravimas su automatinėmis paraštėmis

Pageidautinas būdas centruoti elementus horizontaliai CSS yra naudoti paraštės ypatybę – tiesiog nustatykite paraštės kairės ir paraštės dešinės ypatybes į automatinį. Praktiniu naudojimu, mes galime sukurti konteinerį div šiems elementams, kurie turi būti centruoti. Reikia atkreipti dėmesį į tai, kad reikia nurodyti konteinerio plotį:

div#container{ margin-left:auto; paraštė dešinėje:automatinis; plotis:168px; }

Šis metodas labai gerai veikia daugelyje pagrindinių naršyklių, net IE6 sistemoje "Windows" gali tinkamai rodyti standartiniu atitikties režimu. Deja, žemesnėse IE versijose šis nustatymas nepasiekia centravimo efekto. Taigi, jei norite naudoti šį metodą tikrame projekte, įsitikinkite, kad vartotojo IE naršyklės versija yra ne žemesnė nei 6.0.

Nepaisant paramos trūkumo, dauguma dizainerių rekomenduoja kiek įmanoma naudoti šį metodą. Šis metodas taip pat laikomas teisingiausiu ir pagrįstu iš visų elementų lygio centravimo su CSS įgyvendinimo metodų.

2. Naudokite teksto lygiavimą, kad pasiektumėte centravimą

Kitas būdas pasiekti elemento centravimą yra naudoti teksto lygiavimo ypatybę, nustatyti ypatybės reikšmę į centrą ir pritaikyti ją kūno elementui. Tai įsilaužimas iki galo, tačiau jis suderinamas su daugeliu naršyklių, todėl kai kuriais atvejais jis yra būtinas.

Tai vadinama įsilaužimu, nes šis metodas taiko teksto ypatybes ne tekstui, o elementui, kuris yra konteineris. Tai taip pat suteikia mums papildomo darbo. Sukūrę reikiamus išdėstymo divs, turime pritaikyti teksto lygiavimo ypatybę kūnui pagal šį kodą:

body{ text-align:center; }

Ar po to kils kokių nors problemų? Visi kūno palikuonys yra centre.

Todėl turime parašyti kitą taisyklę, kad grąžintume tekstą į numatytąjį kairiojo lygiavimo lygį:

p{ text-align:left; }

Galima įsivaizduoti, kad ši papildoma taisyklė sukels tam tikrų nepatogumų. Be to, naršyklė, kuri tikrai laikosi standarto, nekeičia konteinerio padėties, o tik centruoja tekstą jame.

3. Naudokite automatinių paraštių ir teksto lygiavimo derinį

Kadangi teksto lygiavimo centravimo metodas yra gerai suderinamas atgal, o automatinio užpildymo metodą taip pat palaiko dauguma šiuolaikinių naršyklių, daugelis dizainerių naudoja šių dviejų derinį, kad maksimaliai padidintų centravimo efekto palaikymą keliose naršyklėse:

body{ text-align:center; } #container{ margin-left:auto; paraštė dešinėje:automatinis; kraštinė:1pxsolidred; plotis:168px; teksto lygiavimas:kairė }

Bet tai visada yra įsilaužimas ir jokiu būdu nėra tobulas. Vis tiek turime parašyti papildomas taisykles tekstui centre esančiame konteineryje, tačiau bent jau jis gerai atrodo įvairiose naršyklėse.

4. Neigiamas išorinio krašto tirpalas

Neigiamų maržų sprendimai toli gražu nėra tokie paprasti, kaip neigiamų maržų pridėjimas prie elementų. Šiam metodui reikia naudoti ir absoliučios padėties, ir neigiamos maržos metodus.

Toliau pateikiamas konkretus šios schemos įgyvendinimo metodas. Pirmiausia sukurkite konteinerį su centruotais elementais ir padėkite jį absoliučiai 50% kairiojo puslapio krašto. Tokiu būdu konteinerio kairioji paraštė prasidės nuo 50% puslapio pločio.

Tada nustatykite konteinerio kairiosios paraštės reikšmę į pusę neigiamo konteinerio pločio. Tai pritvirtins konteinerį horizontalios puslapio krypties viduryje.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; padėtis: absoliutus; kairė:50%; plotis:760px; paraštė kairėje:-380px; }

Žiūrėk, jokių įsilaužimų! Nors tai nėra tinkamiausias sprendimas, tai geras būdas tai padaryti, ir jis yra labai universalus – keista, kad jis net neveikia NetscapeNavigator 4.x be jokių problemų, ar ne? Taigi, jei norite kuo platesnio naršyklės palaikymo, šis metodas bus geriausias pasirinkimas.