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:

  1. #warstwa{
  2. margin-left:auto;
  3. margin-right:auto
  4. }

lub po zoptymalizowaniu i dodaniu zerowego marginesu g??rnego i dolnego

  1. #warstwa{
  2. margin:0 auto;
  3. }

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:

  1. body{
  2. text-align:center;
  3. padding:0;
  4. margin:0;

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:

  1. #warstwa{
  2. margin:0 auto;
  3. text-align:left;
  4. width:780px;
  5. }

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 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?.

  1. #podstawa {
  2. position:absolute;
  3. left:50%;
  4. top:50%; 
  5. margin:-125px 0 0 -250px; 
  6. width:500px;
  7. height:250px;
  8. }

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

  1. <style type="text/css">
  2. html, body { background-color: red; height: 100%; margin: 0; padding: 0; color: white; text-align: center; }
  3. div#centered { border: 0; background-color: white; height: 50%; width: 50%; position: absolute; left: 25%; top: 25%; color: black; }
  4. </style>

student.agh.edu.pl

  1. <style type="text/css">
  2. html, body { margin: 0; border: 0; padding: 0; height: 100% }
  3. html { display: table; width: 100% }
  4. body { display: table-cell; vertical-align: middle }
  5. #test {
  6. margin: 0 auto;
  7. margin-top: expression((x=document.documentElement.clientHeight-this.scrollHeight)>0?x/2+'px':0);
  8. width: 240px;
  9. background-color: red;
  10. }
  11. </style>

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=""> <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

  • Tani hosting

    Szukasz sprawdzonego hostingu www? B?dziesz m??g?? prowadzi? sw??j w??asny serwis lub reklamowa? swoje us??ugi. A do tego zaoszcz?dzi? p??ac?c niewielkie pieniadze za du??? przestrze?? dyskow?. Zapraszamy do zapoznania si? ofert? firmy hostingowej TimNet. Dzi?ki naszej wsp????pracy z firm? mamy do zaoferowania 25% bonifikat? na tani hosting w tej firmie. Wystarczy w polu kupon zni??kowy wpisa?: webmark.shost.pl. Kupon jest do wykorzystania przy aktywacji konta www Serwer Home Hosting PL lub Serwer Web Hosting PL.
  • Saizenmedia

  • Vladstudio

  • Spectab

    Spectab
  • Reset

    Poni??ej zamieszczam link przyk??adowego zapisu css resetuj?cego domy??lne parametry (dope??nienia, marginesy, wielko??? czcionki itp) poszczeg??lnych element??w wykorzystywanych do zbudowania strony. Autorem opracowania jest Eric Mayer
  • Mo??e co?? uaktualni??

    Ju?? ponad p???? roku min???o od ostatniego wpisu… Ale jestem ponownie z nowym (jak zwykle po d??ugiej przerwie) wygl?dem strony i zamiarem uaktualniania jej od czasu do czasu. Ju?? nied??ugo do pobrania udost?pni? poprzedni theme pod wordpressa i zupe??nie nowy projekt.
  • 'Go??y dzie??'

    Go??y dzie?? na mojej stronie trwa?? do??? kr??tko. Jako?? nie jestem przekonany do “obdzierania” strony ze sk??ry tylko po to, aby zobaczy? czy narz?dy i tkank? ma zdrow?. Wydaje mi si?, ??e zupe??nie inaczej mo??na popularyzowa? standardy sieciowe.
  • Wordpress 2.5

    A new version of Wordpress is available. Taki komunikat wita mnie w panelu administracyjnym ju?? od kilkudziesi?ciu godzin. Czas na zmiany. Nowy skrypt jest podobno warty dokonaniu apgrajdu. Zobaczymy. Wi?cej na oficjalnej stronie Wordpressa.
  • Wielkanoc

    Pogodnych, spokojnych, pe??nych nadziei i mi??o??ci ??wi?t Wielkanocnych ??yczy: admin

Ostatnie komentarze

admin
TOP