Как выровнять картинки по вертикали в списке li ?

Olldman, не, не прокатывает.

Вот, что говорят другие спецы:

;) да ну? http://realtsib.ru/oldman/1/ul.html

<div class="container">

<div class="visual">

<ul class="label-ist"></ul>



<img src="/media/catalog/products/6/imgs-avg/1.jpeg" title="Фото: HDR-CX110E BLACK" alt="Фото: HDR-CX110E BLACK" />

<ul class="images-list"><li><div><a rel="gallery" class="thickbox" href="/media/catalog/products/6/imgs/1.jpeg" title=""><img src="/media/catalog/products/6/imgs-icon/1.jpeg" title="Кликните, чтобы увеличить! " alt="Кликните, чтобы увеличить! " /></a></div></li>



<li>....

Это чего за жесть?

Давайте так. Покажите только этот кусок кода и кусок стиля к этому коду...

<ul class="images-list">
<li><a rel="gallery" class="thickbox" href="/media/catalog/products/6/imgs/82766.jpeg" title=""><img src="/media/catalog/products/6/imgs-icon/82766.jpeg" title="Кликните, чтобы увеличить! " alt="Кликните, чтобы увеличить! " /></a></li>
<li><a rel="gallery" class="thickbox" href="/media/catalog/products/6/imgs/82331.jpeg" title=""><img src="/media/catalog/products/6/imgs-icon/82331.jpeg" title="Кликните, чтобы увеличить! " alt="Кликните, чтобы увеличить! " /></a></li>
<li><a rel="gallery" class="thickbox" href="/media/catalog/products/6/imgs/82325.jpeg" title=""><img src="/media/catalog/products/6/imgs-icon/82325.jpeg" title="Кликните, чтобы увеличить! " alt="Кликните, чтобы увеличить! " /></a></li>
</ul>

Т.е. это список ul с элементами li (в которых фотки разных размеров, но все они умещаются в 100 на 100)

Вот стили для этого кода:

.product-info .images-list li {
	float: left;
	border: 1px solid #c7c2ab;
	margin: 0 4px 4px 0;
	display:inline;
	height: 100px;
	width: 100px;
	vertical-align: middle;
}

.product-info .images-list img {
	vertical-align: middle;
}

DyaDya добавил 24.11.2010 в 21:19

Решил проблему с одним верстальщиком, делается так:

.product-info .images-list li {
	float: left;
	border: 1px solid #c7c2ab;
	margin: 0 4px 4px 0;
	display:inline;
}
.product-info .images-list li div {
	width: 100px;
	height: 100px;
	display:table;
}
.product-info .images-list li div a {
	display:table-cell;
	vertical-align: middle;
	width: 100%;
}

1. Т.е. в li втыкается div с нужными размерами. И для этого div прописываем display:table;

2. Затем в диве есть тег a (картинка в нём), для этого тега a задаём:

display:table-cell;

vertical-align: middle;

Тогда всё пашет!

Для IE пишутся вот эти стили с экспрешен:

.product-info .images-list li div a {
	margin-top: expression(this.parentNode.offsetHeight > this.offsetHeight ? ((this.parentNode.offsetHeight-this.offsetHeight)/2 + "px") : "0");
}
* html .product-info .images-list li div a {
	float: left;
}
* + html .product-info .images-list li div a {
	float: left;
}

p.s. жаль, что просто для li задать этого не получилось. В принципе, добавить в html пришлось только одну обёртку из div в каждый li.

pp.ss. ссыль на другой форум, где я тоже успел нашуметь: http://forum.htmlbook.ru/index.php?showtopic=23110 - для полноты раскрытия данной темы.

Невалидно в li втыкать div.

Что мешает сделать так?

Потому что я пробовал так, не сработало. По крайней мере в ФФ. В ИЕ может и пашет.

- ну почему же, элемент li имеет модель содержимого %block; и может содержать в себе любой элемент. Дело здесь похоже не в валидности, а в странном и неоправданном желании натолкать в страницу как можно больше кода.

DyaDya - перед тем, как выложить пример, проверено на Firefox, Google Chrome, Safari, Opera, IE-7.

Ишак №6 давно на помойке, потому на нем не проверял, да и нет его у меня.