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

这里是我的页面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; 
}

来源

2013-10-31 pee2pee

display：block;被尝试？ –

对不起，不知道你的意思 – pee2pee

你的链接不起作用。该域名是私人的。 – SombreErmine

试试这个，

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-31 10:19:21 radha

对不起，我的意思是垂直。已更新。 – pee2pee

你的网址不工作..它得到404错误，所以我没看到你的网站，给出正确的网址 – radha

这是正确的网址。 Pingdom和Facebook都可以看到它 – pee2pee

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

这应该垂直中心在li的

一切

编辑* * *

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

float:left是从工作停止垂直对齐。我删除了这一点，还增加了<br>到li是如此，他们还是可以滴下来，而不是去水平

来源

2013-10-31 10:17:57

对不起，我的意思是垂直。已更新。 – pee2pee

查看我的更新回答 –

对不起，仍然不起作用 – pee2pee

使用table标签，而不是ul li这将完美工作vertical-align:middle。其他解决方案是给css display:table ul，但这不能肯定它的工作与否。

我更新了你的jsfiddle不看它

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

来源

2013-10-31 10:27:44

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

}

来源

2013-10-31 10:40:47

你最好尝试在你的页面的代码， ul.et产品力{ 边界：1px的固体#CCC; height：385px; padding：5px;保证金：10px的;

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

来源

2013-10-31 10:49:23 vadlamani

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

回答

相关问题