[CSS/DIV] Ratkaisee täydellisesti CSS-sivun vaakasuuntaisen keskityksen

Yleinen CSS-menetelmä elementtien vaakasuuntaiseen keskittämiseen

Elementtien keskittäminen CSS:llä ei ole yksinkertaista – samat lailliset CSS-keskityksen asetukset käyttäytyvät eri tavoin eri selaimissa. Aloitetaan tarkastelemalla muutamia yleisiä tapoja keskittää elementtejä vaakasuunnassa CSS:ssä.

1. Keskittäminen automaattisilla marginaaleilla

Suosittu tapa keskittää elementtejä vaakasuunnassa CSS:ssä on käyttää marginaaliominaisuutta—aseta marginaali-vasen ja marginaali-oikea -ominaisuudet automaattiseksi. Käytännössä voimme luoda säiliödivin näille elementeille, jotka täytyy keskittää keskelle. Yksi huomionarvoinen asia on, että säiliön leveys on määriteltävä:

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

Tämä lähestymistapa toimii erittäin hyvin useimmissa suurissa selaimissa, jopa IE6 Windowsilla näkyy oikein standardivaatimustenmukaisuustilassaan. Valitettavasti IE:n alemmissa versioissa tämä asetus ei saavuta keskittämisvaikutusta. Jos siis haluat käyttää tätä menetelmää oikeassa projektissa, varmista, että käyttäjän IE-selainversio ei ole alle 6.0.

Vaikka tukea ei ole, useimmat suunnittelijat suosittelevat tätä lähestymistapaa mahdollisimman paljon. Tätä menetelmää pidetään myös oikeimpana ja järkevimpänä menetelmänä elementtitason keskittämisen toteuttamiseksi CSS:llä.

2. Käytä tekstin kohdistusta keskittämisen saavuttamiseksi

Toinen tapa saavuttaa elementtien keskittäminen on käyttää tekstin kohdistusominaisuutta, asettaa ominaisuuden arvo keskipisteeksi ja soveltaa se runkoelementtiin. Se on läpikotaisin hakkerointi, mutta yhteensopiva useimpien selainten kanssa, joten se on luonnollisesti välttämätön joissain tapauksissa.

Sitä kutsutaan hakkeriksi, koska tämä menetelmä ei sovella tekstin ominaisuuksia tekstiin, vaan siihen elementtiin, joka on kontti. Tämä antaa meille myös lisätyötä. Kun tarvittavat divit on luotu, meidän täytyy soveltaa tekstin kohdistusominaisuus runkoon seuraavan koodin mukaisesti:

body{ text-align:center; }

Tuleeko sen jälkeen ongelmia? Kaikki kehon jälkeläiset ovat keskellä.

Siksi meidän täytyy kirjoittaa toinen sääntö, joka palauttaa tekstin oletusvasemman puolen kohdistukseen:

p{ tekstin kohdistus:vasen; }

On mahdollista, että tämä lisäsääntö aiheuttaa jonkin verran hankaluuksia. Lisäksi selain, joka todella noudattaa standardia, ei muuta kontin sijaintia, vaan keskittää vain tekstin siihen.

3. Käytä automaattisia marginaaleja ja tekstin kohdistusta

Koska tekstin kohdistuskeskityksen menetelmä on hyvä taaksepäin yhteensopiva, ja automaattinen täytemenetelmä on myös useimmissa nykyaikaisissa selaimissa tuettu, monet suunnittelijat käyttävät näiden kahden yhdistelmää maksimoidakseen keskitysefektin tuen selaimen välisen tuen:

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

Mutta tämä on aina kikkailu, eikä se ole millään tavalla täydellinen. Meidän täytyy vielä kirjoittaa lisäsääntöjä keskitetyssä säiliössä olevalle tekstille, mutta ainakin se näyttää hyvältä eri selaimissa.

4. Negatiivinen ulkoreunaratkaisu

Negatiivisten marginaalien ratkaisut eivät ole niin yksinkertaisia kuin negatiivisten marginaalien lisääminen alkuaineisiin. Tämä menetelmä vaatii sekä absoluuttisen positioinnin että negatiivisen marginaalin tekniikoiden käyttöä.

Seuraavassa on tämän järjestelmän tarkka toteutusmenetelmä. Ensiksi luo säiliö, jossa on keskitetyt elementit, ja aseta se ehdottomasti 50 % sivun vasemmasta reunasta. Näin kontin vasen marginaali alkaa 50 % sivun leveydestä.

Aseta sitten säiliön vasemman marginaalin arvo puoleen negatiivisesta säiliön leveydestä. Tämä kiinnittää säiliön sivun vaakasuoran suunnan puoliväliin.

#container{ tausta:#ffcurl(mid.jpg)repeat-ycenter; asema: absoluuttinen; vasen: 50 %; leveys: 760px; marginaali vasemmalla: -380px; }

Katso, ei mitään hukkarointia! Vaikka tämä ei ole mieluisin ratkaisu, se on hyvä tapa tehdä se, ja se on erittäin monipuolinen – yllättävää kyllä, ettei se toimi edes NetscapeNavigator 4.x:ssä ilman ongelmia, eikö vain? Joten jos haluat mahdollisimman laajan valikoiman selaintukea, tämä menetelmä on paras valinta.