Centrowanie

Index » Kategoria: CSS » Tagi: , , .

Jak "wycentrować" stronę aby w oknie przeglądarki wyświetlana była dokładnie pośrodku? To proste. Nadajemy odpowiednie marginesy warstwie/tabeli, w której została umieszczona strona i już. W praktyce wygląda to mniej więcej tak:
[code lang="css"]
#warstwa{
margin-left:auto;
margin-right:auto
}
[/code]
lub po zoptymalizowaniu i dodaniu zerowego marginesu gĂłrnego i dolnego
[code lang="css"]
#warstwa{
margin:0 auto;
}
[/code]
Warstwa lub tabela o id="warstwa" zostanie wyśrodkowana ale "dzięki" geniuszowi programistów od IE w wersjach poniżej 6.0 selektorowi body należy nadać dodatkowo deklarację text-align:center czyli:
[code lang="css"]
body{
text-align:center;
padding:0;
margin:0;
[/code]
a przy okazji pozbyć się "paddingĂłw i marginĂłw" – czyli marginesĂłw i dopełnień. Aby tekst w warstwie nie był wyśrodkowany lecz układał sie od lewej do prawej, naleĹźy nadać jej text-align:left czyli ostatecznie moĹźna ja opisać w ten sposĂłb:
[code lang="css"]
#warstwa{
margin:0 auto;
text-align:left;
width:780px;
}
[/code]
Dlaczego powyĹźej pojawiła się rĂłwnieĹź szerokość warstwy? PoniewaĹź warstwa jest elementem blokowym czyli zajmującym całą dostępną szerokość okna przeglądarki. Jeśli jej szerokość nie zostałaby ograniczona (w tym przypadku do 780px) – wycentrowanie byłoby niewidoczne i bez wiekszego sensu poniewaĹź marginesy nie istniałyby w ogĂłle.

No dobrze, to było proste. Jak jednak moĹźna wycentrować stronę w pionie, tak aby marginesy gĂłrne i dolne dopasowywały się automatycznie do wielkości okna przeglądarki – podobnie jak opisywany powyĹźej margines lewy i prawy? W przypadku tabel sprawa nie jest bardzo skomplikowana. Po prostu: vertical-align:middle (w css) lub valign="middle" (bezpośrednio w znaczniku tabeli) i juĹź. W przypadku elementĂłw pływających vertical-align:middle "nie działa". MoĹźna "obejść" ten problem nadając warstwie cechy tabeli ale nie będę sie nad tym szczegĂłlnie rozpisywał poniewaĹź trochę przypadkiem znalazłem w sieci dość interesujący blog a w nim artykuł o centrowaniu elementĂłw.
Poniżej jednak przedstawię sposób, którego użyłem w "zajawce" na http://zama.republika.pl .
Wystarczy zajrzeć do źródła strony aby stwierdzić, że wycentrowanie elementu w pionie (ale też i w poziomie) uzyskałem nadając warstwie odpowiednie marginesy oraz pozycję.
[code lang="css"]
#podstawa {
position:absolute;
left:50%;
top:50%;
margin:-125px 0 0 -250px;
width:500px;
height:250px;
}
[/code]
PĂłki wyjaśnię w/w deklarację muszę zwrĂłcić uwagę na fakt, Ĺźe wymiary warstwy muszą być znane i określone …

#edit: 3.07.2006

Jak to zobrazować? Warstwa jest spozycjonowana absolutnie (więcej tutaj) a jej gĂłrna krawędĹş przesunięta do połowy (w uproszczeniu) okna przeglądarki. Zatem aby ją wyśrodkować nadałem jej ujemny margines rĂłwny połowie wysokości warstwy – w ten sposĂłb warstwa została przesunięta o połowę w gĂłrę a zarazem wyśrodkowana w pionie. Na takiej samej zasadzie warstwa została wyśrodkowana w poziomie. Jej lewa krawędĹş została przesunięta do środka a następnie poprzez nadanie lewego, ujemnego marginesu rĂłwnego połowie szerokości, spowrotem przesunięta w lewo. Trochę to trudno opisać ale moĹźe zobrazowanie graficzne tego problemu wyjaśni to co napisałem 🙂 .
Kilka przykładów:
vmalek.murphy.cz
[code lang="css"]

[/code]
student.agh.edu.pl
[code lang="css"]

[/code]
jakpsatweb.cz i wiele innych przykładĂłw w sieci …


* * *

  • Napisał: Beny — 23/03/2007 @ 17:37

    Szukałem prostego sposobu wyśrodkowania strony w pionie i.. znalazłem.
    Dzięki!

  • Napisał: Karol — 22/02/2009 @ 23:50

    Artykuł b. mi pomĂłgł przy mojej stronce, ale pozostaje mi jeszcze wiele kwestii do rozwiązania :/ Chyba za długo pisałem na tabelkach Ĺźeby się przestawić 🙂

    Karol – Fotograf Gdynia

* pola wymagane

Linie i paragrafy automatyczne, adres e-mail nigdy nie widoczny.
Dozwolony HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> [code lang="css"][/code], [code lang="html"][/code]

Komentarze są moderowane. Spamowanie (reklamowanie innych stron, wpisy nie na temat itp.) komentarzy może spowodować zablokowanie IP komentującego.



 

tanie serwery www: timnet.pl

Webmark został zbudowany na silniku Wordpress
wpisy (rss)komentarze (rss)
design by zama 2008
Stat24

Ostatnie komentarze

admin
TOP