Zaloguj się

camilost · 06-10-2012, 03:01

Witam, potrzebuję mieć wyśrodkowany zależnie od szerokości i wysokości okna podany kod:

Kod:
<div style="text-align:center; width:95%; height:90%; margin:auto; display:block; vertical-align:middle;">

Nie potrafię sobie z tym poradzić, możecie jakoś nakierować jak to wyśrodkować poziomo i pionowo?

Poziomo działa, lecz nie wiem czy ok zrobiłem jakoś ;p
CSS dot. html i body

Kod:
html{font-size:26px; font-family:Arial, Helvetica, sans-serif; color:#999}

body{background:#FFF; font-family:"lucida grande",tahoma,verdana,arial,sans-serif; margin:0}

Czy znacie jakieś dobre rozwiązanie "płynne"? Najlepiej pod FF i IE oraz telefony.

mateo · 06-10-2012, 16:46

Poziome: margin: auto dla elementu i ew. dla elementu nadrzędnego text-align: center. Co do pionowego to vertical-align + odpowiedni display.

**Kartofelek** · 06-10-2012, 19:19

1) pozycjonowanie absolutne - prawie każdy lightbox z tego korzysta

Kod:
<body>

<div style="background:#efefef; width:400px; height:500px; margin:-200px -250px; position:absolute; top:50%; left:50%">

</div>

</body>

2) http://www.brunildo.org/test/img_center.html - zastosowanie dodatkowego elementu dla wykorzystania vertical-align.
Vertical align NIE POZYCJONUJE w pionie. On pozycjonuje elementy WZGLEDEM SIEBIE. czyli jeżeli masz długi i krótki, to ten którki będzie pozycjonowany wzdlędem długiego. I to jest właśnie rozwiązanie twojego problemu. Tworzysz 1 element 100% height (ale żeby to zrobić musisz w necie poczytać o "CSS 100% layout") a drugi pozycjonujesz względem niego. W linku powyżej masz napisane jak to zrobić. Ogólnie:

Kod:
.container {text-align:center;}

.container > span {height:100%; width:0; display:inline-block;}

.container .element-wysrokowany {display:inline-block; vertical-align:middle;}

<div class="container">

<span></span>

<div class="element-wysrodkowany"></div>

Swoją drogą aż prosi się o zastowanie :before, :after ;]

camilost · 07-10-2012, 05:55

Dziękuję za odpowiedzi, popróbuje i wybiorę tą która mi najbardziej odpowiada Smile

Serdecznie dziękuję Smile

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie