Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML] Centrowanie pionowe zawartości diva + crossplatform, Jak wycentrować zawartość diva który ma określoną wysokość.
blady101
post 29.12.2011, 18:52:20
Post #1





Grupa: Zarejestrowani
Postów: 41
Pomógł: 0
Dołączył: 26.12.2011

Ostrzeżenie: (0%)
-----


Witam

Jest div a w nim obrazek

<div height=280px>
<img src="xxx.jpg"/>
</div>

jak wycentrować obrazek w pionie?

<div height=280px>
<table><tr><td valign=middle>
<img src="xxx.jpg"/>
</td></tr></table>
</div>

Tada.
Moje pytanie to jak wycentrować obrazek w pionie, bez używania tabeli?

Dodam, że wysokość diva jest animowana i się zmienia. Aż dziwne, że tyle lat jeszcze w jakimkolwiek standardzie nie ma opcji centrowania w pionie bez tabel. I trzeba bawić się zawsze tabelami, albo..? Jakieś pomysły? Ja już 3 dzień kombinuję.

Pozdrawiam

Ten post edytował blady101 29.12.2011, 18:54:47
Go to the top of the page
+Quote Post
Shili
post 29.12.2011, 18:54:14
Post #2





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

Ostrzeżenie: (0%)
-----


http://riddle.jogger.pl/2006/04/19/wszystk...trowaniu-w-css/

Jest opcja centrowania.
To IE jej nie interpretuje.

btw, display: table i display: table-cell załatwi sprawę, jeśli nie zamierzasz wspierać IE. Reszta w linku.
Go to the top of the page
+Quote Post
blady101
post 29.12.2011, 18:57:40
Post #3





Grupa: Zarejestrowani
Postów: 41
Pomógł: 0
Dołączył: 26.12.2011

Ostrzeżenie: (0%)
-----


I tu pies pogrzebany. Musi działać przede wszystkim na IE.
Go to the top of the page
+Quote Post
JustHuman4
post 29.12.2011, 19:04:43
Post #4





Grupa: Zarejestrowani
Postów: 63
Pomógł: 2
Dołączył: 10.12.2011
Skąd: Stumilowy Las

Ostrzeżenie: (0%)
-----


Ty chcesz odwrócić ten obrazek do pionu i dodatkowo ustawić żeby był na środku? Nie za bardzo rozumiem tongue.gif
Go to the top of the page
+Quote Post
Shili
post 29.12.2011, 19:07:15
Post #5





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

Ostrzeżenie: (0%)
-----


W linku wyżej masz przykład. Działa pod IE, wymaga jednakże drobnych hacków. Wsjo jest opisane.
Go to the top of the page
+Quote Post
blady101
post 29.12.2011, 19:12:52
Post #6





Grupa: Zarejestrowani
Postów: 41
Pomógł: 0
Dołączył: 26.12.2011

Ostrzeżenie: (0%)
-----


JustHuman4 po prostu wyśrodkować obraz w pionie wink.gif

Shili w tym konkretnym przypadku nie mogę używać pozycji absolutnej, dlaczego długo by wyjaśniać. Natomiast znalazłem już zdaje się inny sposób i właśnie wcielam go w życie.

Skoro animuję, bo animuję wysokość diva, to mogę również wtedy animować górny margines obliczając go tak by wyśrodkowało mi obraz:

(wys.div - wys.img) / 2

Dam znać czy się udało.
Go to the top of the page
+Quote Post
ervico
post 29.12.2011, 19:16:51
Post #7





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 14.09.2011

Ostrzeżenie: (10%)
X----


Zrób to tak
  1. <center>obrazek do wysrodkowania</center>
na pewno zadziała smile.gif we wszystkich przeglądarkach tongue.gif
Go to the top of the page
+Quote Post
blady101
post 29.12.2011, 19:25:31
Post #8





Grupa: Zarejestrowani
Postów: 41
Pomógł: 0
Dołączył: 26.12.2011

Ostrzeżenie: (0%)
-----


Udało się jednakże nie bez minusów.

Animacja działa wolniej niż z tabelami. Na firefox marginesy jakby nie nadążały ale ostatecznie się wyśrodkowuje wszystko.

Jednak to nie jest to. Wole już poczciwe tabele.
Go to the top of the page
+Quote Post
Shili
post 29.12.2011, 19:35:46
Post #9





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

Ostrzeżenie: (0%)
-----


@up
Wspierasz również IE6?
Go to the top of the page
+Quote Post
blady101
post 29.12.2011, 19:43:00
Post #10





Grupa: Zarejestrowani
Postów: 41
Pomógł: 0
Dołączył: 26.12.2011

Ostrzeżenie: (0%)
-----


Szczególnie. Pełno tego w szkołach jeszcze.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 10:52