[CSS/DIV] Idealnie rozwiązuje poziome centrowanie stron CSS

Powszechna metoda CSS do centrowania elementów poziomo

Wyśrodkowanie elementów w CSS nie jest błahą sprawą – te same legalne ustawienia centrowania CSS działają inaczej w różnych przeglądarkach. Zacznijmy od kilku popularnych sposobów centrowania elementów poziomo w CSS.

1. Centrowanie z automatycznymi marginesami

Preferowanym sposobem centrowania elementów poziomo w CSS jest użycie właściwości margin — wystarczy ustawić właściwości margin-lewo i margin-prawy na auto. W praktyce możemy stworzyć kontenerowy div dla tych elementów, które wymagają centrowania. Warto zauważyć, że szerokość kontenera musi być określona:

div#container{ margin-left:auto; margin-right:auto; szerokość: 168px; }

To podejście sprawdza się bardzo dobrze w większości głównych przeglądarek, nawet IE6 na Windows może wyświetlać się poprawnie w standardowym trybie zgodności. Niestety, w niższych wersjach IE to ustawienie nie daje efektu centrowania. Jeśli chcesz użyć tej metody w prawdziwym projekcie, upewnij się, że wersja przeglądarki IE użytkownika nie jest niższa niż 6.0.

Pomimo braku wsparcia, większość projektantów zaleca stosowanie tego podejścia tak często, jak to możliwe. Ta metoda jest również uważana za najbardziej poprawną i rozsądną ze wszystkich metod implementacji centrowania na poziomie elementów za pomocą CSS.

2. Użyj wyrównania tekstowego, aby osiągnąć wyśrodkowanie

Innym sposobem na wyśrodkowanie elementu jest użycie właściwości wyrównania tekstu, ustawienie wartości tej właściwości na środek i zastosowanie jej do elementu ciała. To hack od początku do końca, ale jest kompatybilny z większością przeglądarek, więc w niektórych przypadkach jest naturalnie niezbędny.

Nazywa się to hack, ponieważ metoda ta nie nakłada właściwości tekstu na tekst, lecz na element będący kontenerem. To też daje nam dodatkową pracę. Po utworzeniu niezbędnych divów dla układu musimy zastosować właściwość tekst-align do ciała zgodnie z następującym kodem:

body{ text-align:center; }

Czy potem będą jakieś problemy? Wszyscy potomkowie ciała są wycentrowani.

Dlatego musimy napisać kolejną regułę, która przywróci tekst do domyślnego wyrównania lewej strony:

p{ text-align:left; }

Możliwe, że ta dodatkowa zasada spowoduje pewne niedogodności. Ponadto przeglądarka, która naprawdę przestrzega standardu, nie zmienia pozycji kontenera, a jedynie centruje w nim tekst.

3. Stosuj kombinację automatycznych marginesów i wyrównania tekstu

Ponieważ metoda wyrównania tekstu ma dobrą kompatybilność wsteczną, a metoda automatycznego dosypywania jest również wspierana przez większość współczesnych przeglądarek, wielu projektantów stosuje kombinację obu tych metod, aby zmaksymalizować wsparcie dla efektu centrowania między przeglądarkami:

body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; Ramka: 1pxsolidred; szerokość: 168px; text-align:left }

Ale to zawsze jest hack i nie jest idealny. Wciąż musimy napisać dodatkowe reguły dla tekstu w wyśrodkowanym kontenerze, ale przynajmniej wygląda to dobrze w różnych przeglądarkach.

4. Rozwiązanie z ujemnym marginesem zewnętrznym

Rozwiązania z ujemnymi marginesami dalekie są od tak prostego, jak dodawanie ujemnych marginesów do elementów. Metoda ta wymaga zastosowania zarówno technik pozycjonowania absolutnego, jak i ujemnego marginesu.

Poniżej przedstawiono konkretną metodę implementacji tego schematu. Najpierw stwórz kontener z wyśrodkowanymi elementami i umieść go dokładnie na 50% lewej krawędzi strony. Dzięki temu lewy margines kontenera zaczyna się od 50% szerokości strony.

Następnie ustaw wartość lewego marginesu kontenera na połowę ujemnej szerokości kontenera. To ustali pojemnik w środku kierunku poziomego strony.

#container{ tło:#ffcurl(mid.jpg)repeat-ycenter; pozycja: absolutna; lewo: 50%; szerokość: 760px; margin-left:-380px; }

Słuchaj, żadnych sztuczek! Choć to nie jest preferowane rozwiązanie, to dobry sposób i jest bardzo wszechstronne – co zaskakujące, nie działa nawet w NetscapeNavigator 4.x bez problemów, prawda? Jeśli więc zależy Ci na jak najszerszym wsparciu dla przeglądarek, ta metoda będzie najlepszym wyborem.