0

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

有<ul>一个类名et-products

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

否则，理想情况下，如果可能的话，我希望它们至少正确对齐，因为如果我不使用下面的 CSS，由于图像大小不同，会出现各种奇怪的浮动

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

5 回答 5

1

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

这应该垂直居中你li的

编辑* * *

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

float:left正在停止垂直对齐工作。我删除了它并添加<br>到了li's 中，所以它们仍然可以下拉而不是水平放置

于 2013-10-31T10:17:57.203 回答
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/

于 2013-10-31T10:19:21.310 回答
0

使用table标签而不是ul li这个将完美地工作vertical-align:middle。其他解决方案是将 css 提供display:table给 ul ，但这不确定它是否有效。

我更新了你的 jsfiddle 不看

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

于 2013-10-31T10:27:44.717 回答
0 
ul.et-products li {
  vertical-align:middle

}
于 2013-10-31T10:40:47.670 回答
0

您最好在您的页面中尝试此代码，ul.et-products li {border:1px solid #ccc; 高度：385px；填充：5px；边距：10px；

    display:table-cell;
    text-align:center;
    vertical-align:middle;
    }
于 2013-10-31T10:49:23.303 回答