Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xhtml] Wysrodkowanie divów w pionie
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
wojtek
Witam,

Mam (w dużym uproszczeniu) taki kod:

Kod
<!DOCTYPE html

     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Test</title>

<style type="text/css">

body {margin: 0 auto; text-align: center;}

</style>

</head>

<body xml:lang="pl">



<div style="height: 50px; background-color: #666">test 1</div>

<div style="background-color: #888">test 2<br />test 2<br />test 2</div>



</body>

</html>


Sa to dwa divy jeden pod drugim. I tutaj zaczyna sie moj problem - chciałbym je wyśrodkować w pionie, tzn. aby w kazdej rozdzielczosci znajdowały się na środku.

Macie może pomysł jak to osiągnąć? Ja wszystko co mi do głowy przychodziło próbowałem wdrożyć w życie, niestety nic z tego nie działało.. Będę wdzięczny za pomoc.
borec
[xml:1:553c1b46fd]<div style="position: absolute; top: 50%; margin-top: -[polowa wysokosci diva]px">[/xml:1:553c1b46fd]
wojtek
Cytat
[xml:1:d9decd00da]<div style="position: absolute; top: 50%; margin-top: -[polowa wysokosci diva]px">[/xml:1:d9decd00da]


To działa, ale nie do końca...

Mam kilka divów na stronce, w przykładzie podałem 2, z czego ten drugi nie ma stałej wysokości (zmienia się w zależności od ilości treści). Gdy zastosowałem Twoje rozwiązanie - pierwsza wartstwa była wyśrodkowana prawidłowo, jednak ta która znajdowała się pod nim - już nie. Najlepiej chyba pokazać to na screenie - http://www.kocjan.net/divy.html - Ja chciałbym aby całość była wyśrodkowana, przy czym nie znam długości, gdyż ona jest zmienna. Czy idzie to jakoś inaczej rozwiązać?
hwao
http://www.thenoodleincident.com/tutorials...sson/boxes.html
Sproboj tu poszukac i dopasowac do swojich potrzeb smile.gif
wojtek
Cytat
http://www.thenoodleincident.com/tutorials...sson/boxes.html
Sproboj tu poszukac i dopasowac do swojich potrzeb :)


Przejrzalem chyba wszystkie przykłady tam, niestety żaden nie był wycentrowany w pionie.. Ale skorzystałem z linków i natrafiłem na http://www.quirksmode.org/css/centering.html , gdzie rozwiązano to za pomocą tabel. Nie wiem zatem czy jest jakiś sposób na zrobienie tego bez ich użycia, bo właśnie na tym by mi głównie zależało..
hwao
Wrzuc te Twoje 2 divy do tego diva:
http://www.thenoodleincident.com/tutorials...c_centered.html
I powinno dzia tak jak chcesz :]
wojtek
Cytat
Wrzuc te Twoje 2 divy do tego diva:
http://www.thenoodleincident.com/tutorials...c_centered.html
I powinno dzia tak jak chcesz :]


Niestety ale ten przykład polega tylko na wycentrowaniu poziomym.. Na stronce jest równa odległość u góry i na dole tylko dzięki odpowiednim marginesom. Mi chodzi o to, że strona, która ja robie, ma wysokość czasami nawet 400-500px, a tego już w ten sposób (za pomocą marginesów np. 20 px) nie idzie wyśrodkować w pionie. Zobacz http://www.kocjan.net/divy2.html , to jest ten sam CSS co w podanym przez Ciebie linku, tylko że z mniejszą ilością tekstu..
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.