Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyśrodkowanie DIV'a w CSS
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
gilbo
Witam mam div'a o id content i chcę go wyśrodkować za pomocą css'a mam kod:
Kod
#content{
position:absolute;
left:50%;
margin-left:-490px;
width:980px;
background-color:white;
}


Wszystko ładnie pięknie dopóki nie sprawdziłem w niższej niż moja (1024x768) rozdzielczości (800x600). Niestety, część div'a znajduje się poza lewą krawędzią ekranu i nie ma możliwości zobaczenia jej np. poprzez scroll. Dawałem overflow dla BODY na scroll, ale nie pomogło. Co zrobić bo mam już sporo strony i nie chce mi się zaczynać od nowa... a nie chcę dawać <center> bo mam XHTML'a w którym nie wolno:)

Pozdrawiam!
Mary$
nic dziwnego - ustawiasz konkretne wartości. Ja znam taki sposób:
Kod
margin-left: auto;
margin-right: auto;

ale niestety pod IE to nie działa :/

natomiast jeżeli chcesz wyśrodkować tylko zawartość div'a to uzywasz
Kod
text-align: center;
angel2953
Kod
<div id="wrap">
  <div id="content">
    treść
  </div>
</div>

i css:
Kod
#wrap {
  text-align: center;
}
#content {
  width: 300px; /* można użyć % */
  display: block;
  margin: 0 auto;
  text-align: left;
}
starach
Cytat(angel2953 @ 17.04.2007, 21:06:41 ) *
Kod
<div id="wrap">
  <div id="content">
    treść
  </div>
</div>

i css:
Kod
#wrap {
  text-align: center;
}
#content {
  width: 300px; /* można użyć % */
  display: block;
  margin: 0 auto;
  text-align: left;
}

Angel jaki ma sens wpychanie div content do dodatkowego diva jak ten wraper przecież to niczemu nie służy.
envp
Cytat
ale niestety pod IE to nie działa :/


To dziala pod ie winksmiley.jpg
angel2953
Cytat(orglee @ 18.04.2007, 08:43:00 ) *
Angel jaki ma sens wpychanie div content do dodatkowego diva jak ten wraper przecież to niczemu nie służy.

bo IE 6 olewa margin: auto;
babejsza
IE6 nie olewa margin: 0 auto; tylko trzeba podać mu odpowiedni DOCTYPE.
gilbo
Poradziłem sobie tak, że dałem do body {margin: 0px; padding:0px text-align:center;}
Pozdrawiam:)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.