[css] div i pozycjonowanie tekstu

[marekr]

Moze podac mi ktos podac przyklad w jaki sposob moge w elemencie <div> wyrownac tekst w pionie do srodka lub do dolu? Chodzi mi o atrybut vertical-align, jak bym nie ustawil i tak tekst lub inne elementy w pionie umieszczane sa od gornej czesci...

[Gość]

Wydaje mi się że stosujesz center zamiast middle, ale to tylko przypuszczenie. Moze jak by przepuścic stronke przez validator css-a to by cos sie pokazalo.

[marekr]

Wydaje mi się że stosujesz center zamiast middle, ale to tylko przypuszczenie. Moze jak by przepuścic stronke przez validator css-a to by cos sie pokazalo.

Niestety probowalem zaczynajac wlasnie od middle, probowalem rowniez display: table-cell dla <div>, w ktorym ma byc wymagane wyrownywanie z nadzieja, ze zachowa sie podobnie jak wlasnie pole tabeli. Nic. Wyrownywanie w poziomie (text-align) dziala; wyrownywanie (vertical-align) nie dziala; przy czym (text-align) dla <div> zagniezdzonego w <div> dziala pod warunkiem, ze wewnetrzny <div> ma ustawione "margin: x auto;" (x - dowolny prawidlowy rozmiar)

[marekr]

Wydaje mi się że stosujesz center zamiast middle, ale to tylko przypuszczenie. Moze jak by przepuścic stronke przez validator css-a to by cos sie pokazalo.

Podam jeszcze przyklad kodu (dla uproszczenia style wpisane w "znaczniki" elementow):

Kod: Zaznacz cały

<div style="text-align: center; vertical-align: middle; width: 300px; height: 300px; border: solid 1px red;">

   <p>
      Napis nad
   </p>

   <div style="margin: 0 auto; width: 30px; height: 30px; border: solid 1px green;">
   </div>

   <p>
      Napis pod
   </p>
</div>


Dodam, ze w wewnetrznym <div> jesli we wlasciwosci "margin" brakuje "auto" wowczas nie zadziala dla niego (dla tego <div>) nawet ustawiona wlasciwosc "text-align" elemento W KTORYM zagniezdzony jest <div> (tu: zewnetrzny <div>

[Aht]

Ja mam tak:
(tekst jest w klasie "tekst")
.tekst {
position: absolute;
top: 40px;
left: 150px;
right: 150px;
}
i działa

[argasek]

Z tego co wiem, jest to niestety bolączka CSS, że centrowanie w pionie nie działa dla <div>ów. Najłatwiej chyba będzie posłużyć się jednak tabelką wewnątrz <div>-a

[marekr]

Ja mam tak:
(tekst jest w klasie "tekst")
.tekst {
position: absolute;
top: 40px;
left: 150px;
right: 150px;
}
i działa

Ok. Ale nie zupelnie o to chodzi. Rozmiar bloku podalem jako przykladowy do zaobserwowania efektu. Chodzi mi o efekt taki jak w zwyklej tabeli, wielkosc bloku-kontenera nie jest znana a'priori podobnie jak ostateczny rozmiar elementu zagniezdzanego (powiedzmy, ze chce koleczko na srodku strony niezaleznie od wielkosci/proporcji okna u uzytkownika). Cos uniwersalnego.

Powoli zaczyna mi sie zdawac, ze nie zaimplementowano tego w silniku przegladarki (w IE rowniez to nie chodzi, ale to juz inna historia). I raczej jestem zdania, ze silnik gecko ignoruje pewne atrybuty m.in. te zwiazane z pozycjonowaniem blokow, i tak m.in:
1. Bloki <p></p> oraz <div></div> (oba domyslnie maja/powinny miec "display: block") sa traktowane odmiennie przy wyrownywaniu poziomym (wspomniana wlasciwosc "auto").
2. Nie dziala wyrownywanie pionowe dowolnych elementow wewnatrz <div></div> z okreslona wysokoscia (z roznymi atrybutami, nawet "display: table-cell" rowniez przy probie skonstruowania poprawnej tabeli za pomoca odpowiednich atrybutow poszczegolnych blokow "tabeli"). Wg specyfikacji atrybut "vertical-align" powinien ustawiac odpowiednio elementy jesli sa ulozone "w linii" (compact, line-in).
3. Nie dzialaja niektore sposoby rozmieszczania elementow opisane w specyfikacji. Np. ukladanie blokow obok siebie. Np. jesli jest <h1 style="display: run-in"></h1><p></p> to tresci blokow <h1> i <p> powinny byc wyswietlone OBOK siebie. Wg specyfikacji...

Powyzsze powinny dzialac jesli jest zgodnosc przegladarki z CSS2.

Coz tabele sie jednak klaniaja

[Domel]

Np. ukladanie blokow obok siebie. Np. jesli jest <h1 style="display: run-in"></h1><p></p> to tresci blokow <h1> i <p> powinny byc wyswietlone OBOK siebie. Wg specyfikacji...

Zaraz, zaraz chyba nie chcesz powiedziec ze <h1 style="display: run-in"></h1> ma cos wspolnego z blokiem
A to ze Mozilla (jak kazda inna przegladarka) ma problemy z wyswietlaniem niektorych wartosci wlasnosci display to jest oczywisice. Szczegolnie run-in to nie jedyny przyklad bo mozna dodac marker i kilka innych.
Ale jeszcze raz powtarzam display nie jest przeznaczone dla XHTML-a (ani zadnej innej aplikacji XML-a). Ta wlasnosc jest dla XML-a jako niezdefiniowanej calosci. Zupelnie tak samo jak XSL-FO.

[marekr]

Zaraz, zaraz chyba nie chcesz powiedziec ze <h1 style="display: run-in"></h1> ma cos wspolnego z blokiem
A to ze Mozilla (jak kazda inna przegladarka) ma problemy z wyswietlaniem niektorych wartosci wlasnosci display to jest oczywisice. Szczegolnie run-in to nie jedyny przyklad bo mozna dodac marker i kilka innych.
Ale jeszcze raz powtarzam display nie jest przeznaczone dla XHTML-a (ani zadnej innej aplikacji XML-a). Ta wlasnosc jest dla XML-a jako niezdefiniowanej calosci. Zupelnie tak samo jak XSL-FO.

Oczywiscie, ze nie tak nie twierdze. Tylko <h1></h1> jako taki jest blokiem (chodzi o dysplay: block) i ta postac mialem na mysli piszac "blok".

Wlasnosc "display". Podalem tylko jako przyklad spostrzezen, kiedy zniecierpliwiony "nieposluszna" wlasnoscia vertical-align zaczalem kombinowac z... display, probujac z przykladow nt. CSS2 (W3C).

No i: nie czepiam sie Mozilli (itp.). To produkt, szczegolnie silnik, w swojej kategorii - pod wieloma wzgledami - conajmniej zbawienny.

[Domel]

Racja. Generalie podsumowujac to ze Mozilla "nie widzi" vertical-align e blokach jest bardzo dobre bo widzec nie powinna (vertical-align jest tylko dla inline* i table-cell).

[bboy destro]

do styli diva wystarczy dać coś takiego:

Kod: Zaznacz cały

display:table-cell;
   vertical-align:middle;

[Anomin]

IE<8 to nie wystarczy.

[Anomin]

Jeszcze raz ja: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html