ugrás a tartalomhoz

Float-olt li elemben lévő kép függőleges középre igazítása

paal · 2008. Aug. 2. (Szo), 20.01
Sziasztok!

Egy olyan lista nézetet kellene elkészítenem, amiben maximum 4 kép lenne egymás mellett egy sorban. Amennyiben több kép van, akkor azokat a következő sorban folytatja. A képek maximális mérete 104x104 px., képek keretei közt 12px távolsággal.
Mindent teljesen jól is sikerült megcsinálnom, de abban az esetben ha a kép magassága mondjuk csak 85px, akkor elég bénán néz ki, hogy felülre igazodik, lent meg marad a bazi nagy hely. De sehogy nem sikerül függőlegesen középre illesztenem. Az nem probléma, ha a szélessége kisebb, mint 104px, mert vízszintesen középre igazodik.
  1. <div class="container">  
  2.   <ul>  
  3.     <li><a href="#"><img src="files/54-138-2042.jpg" /></a></li>  
  4.     <li><a href="#"><img src="files/54-138-2042.jpg" /></a></li>  
  5.     <li><a href="#"><img src="files/54-138-2042.jpg" /></a></li>  
  6.     <li><a href="#"><img src="files/54-138-2042.jpg" /></a></li>  
  7.     <li><a href="#"><img src="files/54-138-2042.jpg" /></a></li>  
  8.     <li><a href="#"><img src="files/54-138-2042.jpg" /></a></li>  
  9.   </ul>  
  10. </div>  
  1. .container {  
  2.     width: 490px;  
  3. }  
  4. .container ul {  
  5.     list-style-type: none;  
  6.     background: none;  
  7.     margin: 0;  
  8.     padding: 0;  
  9. }  
  10. .container ul li {  
  11.     display: block;  
  12.     border: 3px solid red;  
  13.     width: 104px;  
  14.     height: 104px;  
  15.     float: left;  
  16.     margin: 6px;  
  17.     text-align: center;  
  18. }  
Meg lehet ezt valahogy oldani?

Nagyon köszi!

Üdv, Pali
‹ Ajax browser cache hiba eseten IE7 innerHTML-be javascript betöltése ›
 ■
1

line-height

demo · 2008. Aug. 3. (V), 09.40
szia!

Ha a kép inline elem akkor:
  1. .container ul li {  
  2. line-height:104px;  
  3. }  
Én blockként jobb szeretem a képeket.(ff-ban az inline képek alatt van egy kis hely.)
Line-height-nél figyelni kell arra, hogy font-size ne legyen utána, az felülbírálja.

Vagy megoldhatod eképpen:
  1. .container ul li img {display: block; *display: inline; }  
  2. .container ul li {  
  3. display: table-cell;  
  4. vertical-align: middle;  
  5. *line-height:104px;  
  6. }  
* IE böngészőknek marad a inline, line-height kombó. A table-cell-t nem támogatják.
2

Közben én is nyomoztam

paal · 2008. Aug. 3. (V), 12.35
Ez a megoldás IE7 és FF3 alatt működik, Opera-9.50 alatt viszont nem (más böngészőm nincs most nincs):
  1. .container {  
  2.     background-color: #ccc;  
  3.     width: 490px;  
  4. }  
  5. .container ul {  
  6.     list-style-type: none;  
  7.     background: none;  
  8.     margin: 0;  
  9.     padding: 0;  
  10. }  
  11. .container ul li {  
  12.     display: block;  
  13.     border: 3px solid red;  
  14.     width: 104px;  
  15.     height: 104px;  
  16.     float: left;  
  17.     margin: 6px;  
  18.     text-align: center;  
  19.     line-height: 104px;  
  20.     background-color: #FFFFFF;  
  21. }  
  22. .container ul li img {  
  23.     vertical-align: middle;  
  24. }  
Ha display: inline, az eredmény változatlan. Végül is mondható, h nagyjából jó :)
  1. .container ul li {  
  2.     display: inline;  
  3.     .  
  4.     .  
  5.     .  
  6. }  
Itt egy egész jó kis leírás hozzá: Vertical centering using CSS

Köszi, Pali