[CSS/DIV] Täiuslikult lahendab CSS lehe horisontaalse tsentreerimise

Levinud CSS-meetod elementide horisontaalseks kesktamiseks

Elementide keskendamine CSS-iga ei ole lihtne – samad legitiimsed CSS-i keskendamise seaded käituvad erinevates brauserites erinevalt. Alustame mõne levinud viisi elementide horisontaalseks tsentreerimiseks CSS-is.

1. Keskendamine automaatsete marginaalidega

Eelistatud viis CSS-is elementide horisontaalseks tsentreerimiseks on marginaali omaduse kasutamine – lihtsalt sea margin-vasakule ja marginaal-paremale omadused automaatseks. Praktilises kasutuses saame luua konteinerijaosa nende elementide jaoks, mis vajavad tsentreerimist. Üks asi, mida tähele panna, on see, et konteineri laius tuleb täpsustada:

div#container{ margin-left:auto; margin-right:auto; laius: 168px; }

See lähenemine töötab väga hästi enamikus suuremates brauserites, isegi IE6 Windowsis suudab oma standardses vastavusrežiimis korrektselt kuvada. Kahjuks ei saavuta IE madalamates versioonides see seadistus keskenduse efekti. Kui tahad seda meetodit päris projektis kasutada, siis veendu, et kasutaja IE brauseriversioon ei oleks madalam kui 6.0.

Hoolimata toe puudumisest soovitavad enamik disainerid seda lähenemist võimalikult palju kasutada. Seda meetodit peetakse ka kõige õigemaks ja mõistlikumaks kõigist CSS-i elementide taseme keskstamise rakendamise meetodiks.

2. Kasuta tekstijoondamist tsentriseerumise saavutamiseks

Teine viis elementide tsentreerimise saavutamiseks on kasutada tekstijoondamise omadust, määrata omaduse väärtus keskpunktiks ja rakendada see kehaelemendile. See on läbi-lõhki nipp, kuid ühilduv enamiku brauseritega, seega on see mõnel juhul loomulikult hädavajalik.

Seda nimetatakse häkkimiseks, sest see meetod ei rakenda teksti omadusi tekstile, vaid elemendile, mis on konteiner. See annab meile ka lisatööd. Pärast vajalike div-de loomist paigutuse jaoks peame rakendama tekstijoondamise omaduse kehale vastavalt järgmisele koodile:

body{ text-align:center; }

Kas pärast seda tekib mingeid probleeme? Kõik keha järeltulijad on keskel.

Seetõttu peame kirjutama veel ühe reegli, et tekst taastada vaikimisi vasakpoolse joondamise juurde:

p{ text-align:left; }

On võimalik, et see lisareegel võib põhjustada mõningaid ebamugavusi. Samuti ei muuda brauser, mis tõeliselt järgib standardeid, konteineri asukohta, vaid keskendab ainult teksti selles.

3. Kasuta automaatsete marginaalide ja teksti joondamise kombinatsiooni

Kuna teksti joondamise keskendamise meetodil on hea tagurpidi ühilduvus ja automaatne täitmise meetod on toetatud ka enamikus kaasaegsetes brauserites, kasutavad paljud disainerid nende kahe kombinatsiooni, et maksimeerida tsentriseerumise efekti kasutajatevahelist tuge:

body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; border:1pxsolidred; laius: 168px; text-align:left }

Aga see on alati nipp ja see pole sugugi täiuslik. Me peame veel kirjutama täiendavaid reegleid teksti jaoks tsentreeritud konteineris, kuid vähemalt näeb see erinevates brauserites hea välja.

4. Negatiivse välisserva lahendus

Negatiivsete marginaalide lahendused ei ole kaugeltki nii lihtsad kui negatiivsete marginaalide lisamine elementidele. See meetod nõuab nii absoluutse positsioneerimise kui ka negatiivse marginaali tehnikate kasutamist.

Järgnevalt on toodud selle skeemi konkreetne rakendusmeetod. Esiteks loo konteiner keskel olevate elementidega ja paiguta see täpselt 50% lehe vasakust servast. Nii algab konteineri vasak marginaal 50% lehe laiusest.

Seejärel määra konteineri vasak marginaal poole negatiivse konteineri laiuse suuruseks. See fikseerib konteineri lehe horisontaalse suuna keskele.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; positsioon: absoluutne; vasak: 50%; laius: 760px; marginaal vasakul:-380px; }

Vaata, mitte mingeid häkke! Kuigi see pole eelistatud lahendus, on see hea viis ja väga mitmekülgne – üllataval kombel ei tööta see isegi NetscapeNavigator 4.x-s probleemideta, eks? Seega, kui soovid võimalikult laia valikut brauseritoest, siis see meetod on parim valik.