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

【问题标题】：Vertically Center Align Images and Text in a List垂直居中对齐列表中的图像和文本
【发布时间】：2013-10-31 19:03:28
【问题描述】：

这是我遇到问题的页面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;
}

【问题讨论】：

显示：块；试过了吗？
抱歉，不确定您的意思
您的链接无效。该域是私有的。
它确实有效，但它不是私人的
我已经为该链接创建了一个 browsershots.org，这就是即将发生的事情：browsershots.org/http://www.theplasticsdepot.co.uk/… 只是想你应该知道它在某些地方被某些人阻止了。如果您因为我们无法加载您的网站而失去客户，这可能是您可能需要调查的问题。

标签： html css wordpress list woocommerce

【解决方案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/

【讨论】：

你的 url 不工作..它得到 404 错误所以我没有看到你的网站，给正确的 url
对不起，它不起作用。试试这个。 ul.et-products li img{ vertical-align:middle;}
差不多了，但文字消失了
在你的第一个 li 中没有文本，请参阅下一个 li
在我的源代码中，有文字，但运行时看不到任何文字。我已经检查了 Chrome 和 FireFox

【解决方案2】：

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

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

编辑***

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

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

【讨论】：

你能发布一个 JSFiddle 你的列表吗？
在 jsFiddle 上有效，但在网站上无效，一定有其他代码破坏了它！ jsfiddle.net/r93dM/1 工作得更好，因为jsfiddle.net/r93dM/2 将它们全部连续列出
必须是列表所在空间的宽度。也许您可以计算出水平方向可以容纳多少产品，而<br> 是正确的，可以将列表向下移动到下一行？抱歉，如果这听起来令人困惑。

【解决方案3】：

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

}

【讨论】：

【解决方案4】：

您最好在您的页面中尝试此代码， ul.et-产品李{ 边框：1px 实心#ccc；高度：385px；填充：5px；边距：10px;

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

【讨论】：

【解决方案5】：

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

我更新了你的 jsfiddle 不看它

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

【讨论】：