[CSS / DIV] Lieliski atrisina CSS lapas horizontālo centrēšanu

Izplatīta CSS metode elementu horizontālai centrēšanai

Elementu centrēšana ar CSS nav triviāls jautājums - tie paši likumīgie CSS centrēšanas iestatījumi dažādās pārlūkprogrammās darbojas atšķirīgi. Sāksim ar dažiem izplatītiem veidiem, kā CSS elementus centrēt horizontāli.

1. Centrēšana ar automātiskām piemalēm

Vēlamais veids, kā CSS elementus centrēt horizontāli, ir izmantot piemales rekvizītu — vienkārši iestatiet rekvizītus piemales pa kreisi un pa labi uz automātiski. Praktiski mēs varam izveidot konteineru div šiem elementiem, kuriem jābūt centrētiem. Viena lieta, kas jāatzīmē, ir jānorāda konteinera platums:

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

Šī pieeja darbojas ļoti labi lielākajā daļā lielāko pārlūkprogrammu, pat IE6 operētājsistēmā Windows var pareizi parādīties standarta atbilstības režīmā. Diemžēl jaunākās IE versijās šis iestatījums nesasniedz centrēšanas efektu. Tātad, ja vēlaties izmantot šo metodi reālā projektā, pārliecinieties, ka lietotāja IE pārlūkprogrammas versija nav zemāka par 6.0.

Neskatoties uz atbalsta trūkumu, lielākā daļa dizaineru iesaka izmantot šo pieeju, cik vien iespējams. Šī metode tiek uzskatīta arī par vispareizāko un saprātīgāko no visām elementu līmeņa centrēšanas ieviešanas metodēm ar CSS.

2. Izmantojiet teksta līdzināšanu, lai panāktu centrēšanu

Vēl viens veids, kā panākt elementu centrēšanu, ir izmantot rekvizītu teksta līdzināšana, iestatīt rekvizīta vērtību uz centru un lietot to pamatteksta elementam. Tas ir uzlaušana cauri un cauri, bet tas ir saderīgs ar lielāko daļu pārlūkprogrammu, tāpēc dažos gadījumos tas, protams, ir būtiski.

To sauc par uzlaušanu, jo šī metode nepiemēro teksta rekvizītus tekstam, bet elementam, kas ir konteiners. Tas dod mums arī papildu darbu. Pēc izkārtojumam nepieciešamo div izveides mums ir jāpiemēro teksta līdzināšanas rekvizīts ķermenim saskaņā ar šādu kodu:

body{ text-align:center; }

Vai pēc tam būs kādas problēmas? Visi ķermeņa pēcnācēji ir centrēti.

Tāpēc mums ir jāraksta vēl viens noteikums, lai atgrieztu tekstu noklusējuma kreisās puses līdzinājumā:

p{ teksta līdzināšana:pa kreisi; }

Ir iespējams, ka šis papildu noteikums radīs zināmas neērtības. Arī pārlūkprogramma, kas patiesi ievēro standartu, nemaina konteinera pozīciju, bet tikai centrē tekstu tajā.

3. Izmantojiet automātisko piemaļu un teksta līdzinājuma kombināciju

Tā kā teksta līdzinājuma centrēšanas metodei ir laba atpakaļsaderība un automātiskā polsterējuma metode tiek atbalstīta arī lielākajā daļā mūsdienu pārlūkprogrammu, daudzi dizaineri izmanto abu kombināciju, lai maksimāli palielinātu starppārlūkprogrammu atbalstu centrēšanas efektam:

body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; robeža:1pxsolidred; platums:168px; teksta līdzināšana:pa kreisi }

Bet tas vienmēr ir hack, un tas nekādā ziņā nav ideāls. Mums joprojām ir jāraksta papildu noteikumi tekstam centrētajā konteinerā, bet vismaz tas izskatās labi dažādās pārlūkprogrammās.

4. Negatīvs ārējās malas šķīdums

Negatīvo maržu risinājumi nebūt nav tik vienkārši kā negatīvu rezervju pievienošana elementiem. Šī metode prasa izmantot gan absolūtās pozicionēšanas, gan negatīvās rezerves metodes.

Tālāk ir norādīta šīs shēmas īpašā īstenošanas metode. Pirmkārt, izveidojiet konteineru ar centrētiem elementiem un novietojiet to absolūti 50% no lapas kreisās malas. Tādā veidā konteinera kreisā piemale sāksies no 50% no lapas platuma.

Pēc tam iestatiet konteinera kreisās piemales vērtību uz pusi no negatīvā konteinera platuma. Tas nostiprinās konteineru lapas horizontālā virziena viduspunktā.

#container{ fons:#ffcurl(mid.jpg)repeat-ycenter; pozīcija: absolūta; pa kreisi:50%; platums:760px; piemale pa kreisi:-380px; }

Paskatieties, nav hacks! Lai gan tas nav vēlamais risinājums, tas ir labs veids, kā to izdarīt, un tas ir ļoti daudzpusīgs - pārsteidzoši, ka tas pat nedarbojas NetscapeNavigator 4.x bez jebkādām problēmām, vai ne? Tātad, ja vēlaties visplašāko pārlūkprogrammas atbalsta klāstu, tad šī metode būs labākā izvēle.