垂直对齐并匹配最大高度li元素与所有其他元素。

Question

我让List项目以红色显示，我希望它们与列表元素中的最大高度相同，现在是crains图像。现在代码看起来像这样。我也希望它们居中，所以它们都是垂直对齐的。

<ul class="press_list">
 <li><img src=""/></li>
</ul>

图片http://tinypic.com/r/wlad8o/8

您可以看到所有红色框的高度不匹配，图像不是垂直居中的。任何帮助都会很棒。

Answer 1

要使元素垂直对齐，您必须将它们设置为display: inline;或display: inline-block;，并在css文件中声明宽度vertical-align: middle;。它们将与在那里声明的line-height对齐，中心元素的技巧是将font-size声明为height并将其赋予vertical-align: middle;属性，这样line-height将是所有height，元素将完全对齐在中间。

我做了一个例子但是我没有使用图像，而是为元素设置了不同的高度。您将看到它们首先具有不同的宽度和高度但是在运行js之后它们获得与最大值相同的高度并且也是垂直对齐的。尝试拳头评论js代码，这样你就可以看到开头的元素，然后用js再次尝试，你会看到它们是如何达到相同的高度。

看看：

http://jsfiddle.net/carloscalla/p2nbuux7/15/

我设定高度的地方：

看到我在-1中初始化max_height变量以防万一。

var max_height = -1;

并使用jQuery＆＃34;每个＆＃34;函数获得最大高度

$('.press_list').find('li').each(function(){
    // Code here
});