Question

这是http://www.theplasticsdepot.co.uk/product-category/drains/underground-pipes-and-fittings/页面，我遇到了问题。为清楚起见，我在每个项目周围放置了边框。

<ul>的班级名称为et-products

我希望每个列表项都至少垂直居中，所以它只是看起来＆＃34;对＆＃34;。

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

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

Answer 1

将display:table-cell和vertical-align:middle添加到您的ul.et-products li

这应该垂直居中li的所有内容

编辑*的 * *

更新了小提琴：http://jsfiddle.net/r93dM/1/

float:left阻止垂直对齐工作。我删除了此内容，并将<br>添加到li，这样他们仍可以下拉而不是横向

Answer 2

试试这个，

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/

Answer 3

使用table标记代替ul li这将完美地运作vertical-align:middle。其他解决方案是给css display:table到ul但是这不确定它是否有效。

我更新了你的jsfiddle而不是看它

http://jsfiddle.net/r93dM/2/

Answer 4

ul.et-products li {
  vertical-align:middle

}

Answer 5

你最好在你的页面中尝试这个代码， ul.et-products li { border：1px solid #ccc; 高度：385px; 填充：5像素;余量：10px的;

    display:table-cell;
    text-align:center;
    vertical-align:middle;
    }

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

5 个答案: