Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML]Wyśrodkowanie obrazka w pionie wewnątrz odnośnika
uglukha
post 25.02.2012, 11:20:04
Post #1





Grupa: Zarejestrowani
Postów: 110
Pomógł: 0
Dołączył: 5.05.2008

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


Witam,
mam szybkie pytanko, jak wypośrodkować obrazek w pionie? Przypadek jest taki, że obrazek jest mniejszy niż "powierzchnia klikalna", więc ustaliłem w css odpowiednia wysokosc i szerokosc, wszystko ladnie dziala, tylko ze obrazek wyswietla sie przy gornej krawedzi (rys 1), a nie tak jakbym chcial - na srodku (rys 2). vertical-align: middle nic tu nie zmienia jak widac.

rys 1



rys 2


  1. <a href="lalala.html'" class="miniaturka"><img src="mini.jpg" alt="" class="img-min"></a>


  1. .miniaturka {
  2. width: 110px; height: 110px; display: inline-block; overflow: hidden; vertical-align: middle;
  3. }
  4.  
  5. .img-min {
  6. vertical-align: middle;
  7. }


Z gory dzieki za wszelka pomoc!
Pozdrawiam. smile.gif


--------------------
Death and Decay >.<
Go to the top of the page
+Quote Post
crew123
post 25.02.2012, 11:21:48
Post #2





Grupa: Zarejestrowani
Postów: 89
Pomógł: 0
Dołączył: 25.02.2012

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


spróbuj dodać !important do vertical-align:middle
Go to the top of the page
+Quote Post
uglukha
post 25.02.2012, 11:25:54
Post #3





Grupa: Zarejestrowani
Postów: 110
Pomógł: 0
Dołączył: 5.05.2008

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


Nie pomogło, w każdej przeglądarce obrazek jest na górze sad.gif


--------------------
Death and Decay >.<
Go to the top of the page
+Quote Post
toffiak
post 25.02.2012, 11:26:46
Post #4





Grupa: Zarejestrowani
Postów: 395
Pomógł: 80
Dołączył: 24.08.2009

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


http://jsfiddle.net/pEtrm/

zamiast display: inline-block; display: table-cell


--------------------
Go to the top of the page
+Quote Post
uglukha
post 25.02.2012, 11:37:46
Post #5





Grupa: Zarejestrowani
Postów: 110
Pomógł: 0
Dołączył: 5.05.2008

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


super, w firefoxie juz jest dobrze, to teraz pytanie za 100 punktow, co zrobic zeby w ie tez dzialalo? ;(


--------------------
Death and Decay >.<
Go to the top of the page
+Quote Post
vonski
post 25.02.2012, 12:11:36
Post #6





Grupa: Zarejestrowani
Postów: 292
Pomógł: 89
Dołączył: 27.12.2006
Skąd: Warszawa

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


  1.  
  2. <style type="text/css">
  3. .box {
  4. display: table-cell;
  5. text-align: center;
  6. vertical-align: middle;
  7. width: 1000px;
  8. height: 1000px;
  9. }
  10. .box * {
  11. vertical-align: middle;
  12. }
  13.  
  14. <!--[if lt IE 8]>
  15. <style>
  16. .box span {
  17. display: inline-block;
  18. height: 100%;
  19. }
  20. </style>
  21. <![endif]-->
  22.  


Użycie:

  1. <div class="box"><span></span><img src="1.jpg" /></div>


Oczywiście wymiary boxu ustawiasz jakie chcesz.


--------------------
Zend Certified Engineer | Microsoft Certified Professional: Programming in HTML5 with JavaScript & CSS3 | Blog
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: 30.04.2025 - 05:19