html - 垂直居中对齐列表中的图像和文本

Question

这是页面 http://www.theplasticsdepot.co.uk/product-category/drains/underground-pipes-and-fittings/我有问题。为清楚起见，我在每个元素周围都加了边框。

<ul>类名是 et-products

我希望每个列表项至少都垂直居中，这样它看起来就“正确”。

否则，理想情况下，如果可能的话，我希望它们至少正确对齐，因为如果我不使用下面的 CSS，各种由于各种图像尺寸而发生奇怪的 float

ul.et-products li {
   border:1px solid #ccc;
   height:385px;
   padding:5px; margin:10px;
}

Answer 1

试试这个，

ul.et-products li a{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    height:385px;
    width: 200px; 
   }
ul.et-products li h3{
      margin-top:10px;
   }

jsfiddle:http://jsfiddle.net/r93dM/3/