Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]ff 3.0 wysrodkowanie w pionie
Forum PHP.pl > Forum > Przedszkole
Hunterro
chce wysrodkowac strone w pionie. wiadomo najskuteczniejsza metoda jest zrobienie dwoch divowo z display tak zeby udawaly tabele + vertical-align + hack na ie. Zeby juz sie nie bawic zrobilem po prostu tabele. nadalem jej height:100% i vertical-align: middle.
Okazuje sie ze dziala wszedzie oprocz ff 3.0 (juz np na 3.5 dziala). Dokladnie wersja na ktorej mam problem to 3.0.13. dzieje sie tak jakby tabela nie przyjmowala height: 100%.
Przyklad http://fotografia.webiq.pl/1,1,galeria---krajobrazowa,8
r4xz
czy wysokość jest zawsze stała?

jeśli tak (dla wysokości elementu 800px!!):

  1.  
  2. #cos {
  3.  
  4. position: absolute; top: 50%;
  5.  
  6. margin-top: -400px;
  7.  
  8. }
  9.  


Hunterro
no w tym przypadku jest stala.
dzieki za pomoc ;]
a z ciekawosci - jesli by nie byla stala?
Trinity
Rozwiązanie Twojego problemu to:

[CSS]
wersja nr 1
#center {
float: left;
position: absolute;
top: 0; left: 50%;
width: 800px;
margin: 0 0 0 -400px; /* połowa szerokości */
}

wersja nr 2
jeśli chcesz mieć "pudło na środku monitora"
#centercenter {
float: left;
position: absolute;
top: 50%; left: 50%;
width: 800px;
height: 500px;
margin: -250px 0 0 -400px; /* odejmujesz połowę szerokości i wysokości - miłego testowania */
}



[HTML]

wersja nr 1
<div id="center">

<!-- Tutaj zawartość, dzięki nie podawaniu 'height' w stylu div będzie się rozciągał w dół -->

</div>



wersja nr 2
<div id="centercenter">

<!-- Tutaj zawartość -->

</div>
Hunterro
a wlasnie jesli wysokosc nie jest stala?

przepraszam ze post pod postem ale moze komus sie przyda.

okazalo sie ze zeby tabelka zalapywala height 100% i dalo sie w niej calosc wysrodkowac w pionie w ff 3.0.13 wystarczy dac:
html{height: 100%;}
nawet szedlem od poczatku tym tropem ale dawalem:
body{height: 100%;}
i to nie pomagalo :]
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.