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. 
<div class="container">
  <ul>
    <li><a href="#"><img src="files/54-138-2042.jpg" /></a></li>
    <li><a href="#"><img src="files/54-138-2042.jpg" /></a></li>
    <li><a href="#"><img src="files/54-138-2042.jpg" /></a></li>
    <li><a href="#"><img src="files/54-138-2042.jpg" /></a></li>
    <li><a href="#"><img src="files/54-138-2042.jpg" /></a></li>
    <li><a href="#"><img src="files/54-138-2042.jpg" /></a></li>
  </ul>
</div>
.container {
	width: 490px;
}
.container ul {
	list-style-type: none;
	background: none;
	margin: 0;
	padding: 0;
}
.container ul li {
	display: block;
	border: 3px solid red;
	width: 104px;
	height: 104px;
	float: left;
	margin: 6px;
	text-align: center;
}
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:

.container ul li {
line-height:104px;
}
É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:

.container ul li img {display: block; *display: inline; }
.container ul li {
display: table-cell;
vertical-align: middle;
*line-height:104px;
}
* 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): 

.container {
	background-color: #ccc;
	width: 490px;
}
.container ul {
	list-style-type: none;
	background: none;
	margin: 0;
	padding: 0;
}
.container ul li {
	display: block;
	border: 3px solid red;
	width: 104px;
	height: 104px;
	float: left;
	margin: 6px;
	text-align: center;
	line-height: 104px;
	background-color: #FFFFFF;
}
.container ul li img {
	vertical-align: middle;
}
Ha display: inline, az eredmény változatlan. Végül is mondható, h nagyjából jó :)

.container ul li {
	display: inline;
	.
	.
	.
}
Itt egy egész jó kis leírás hozzá: Vertical centering using CSS

Köszi, Pali