一个DIV内的多个图像的垂直居中

Question

我有一个固定高度的简单DIV和几个单独高度的图像（它们的高度等于或小于外部DIV的高度）：

<div>
  <img src="..">
  <img src="..">
  ...
</div>

此标记按原样显示，无法更改。我需要并排显示所有图像，所有图像应与DIV的中间垂直对齐（因此每个图像的填充顶部和底部相同）。

如何在不更改标记的情况下执行此操作？各种答案处理标记，其中图像被放置在DIV内部，而这不是这里的情况。

Answer 1

重新阅读您的问题后，<div>至少与最高图片一样高，只需执行以下操作：

<强> CSS

img {
    vertical-align: middle;
}​

在此处试试：http://jsfiddle.net/AsD9q/

您还可以通过在容器上设置显式width或使用white-space: nowrap;来阻止div中断（当视口很小时）：http://jsfiddle.net/MvDZJ/（使用宽度）或{ {3}}（使用空格）

这就是结果：

第一个答案，适用于div的每个高度：

正如你对集装箱本身一无所知，我认为它并不比视口宽。你可以简单地做这样的事情：

<强> HTML

<div>
    <img src="http://lorempixel.com/200/100/">
    <img src="http://lorempixel.com/200/80/">
    <img src="http://lorempixel.com/200/120/">
    <img src="http://lorempixel.com/200/60/">
</div>​

<强> CSS

​div {
    display: table-cell;
    vertical-align: middle;
    /* only added for demonstration */
    height: 200px;
    border: 1px solid red;
}
img {
    vertical-align: middle;
}

这在IE7中不起作用，因为它无法处理display: table-cell。您可以在此处尝试：http://jsfiddle.net/xMtBp/。

Answer 2

这可以使用jQuery来完成，问题是你没有明确的选择器可以使用它会影响页面上每个div中的每个图像。

首先，您需要在CSS中将图像设置为div的顶部：

   div img{vertical-align:top;}

然后连续拍摄每张图像，获得它的高度并将其顶部填充设置为div高度与图像高度之差的一半。

​$(document).ready(function(){
$("img").each(function(){
var margin= ($(this).parent().height() - $(this).height())/2;
    $(this).css('margin-top',margin);
});        
});​

同样，如果没有良好的固体选择器，这不是理想的解决方案，但它确实有效。 http://jsfiddle.net/calder12/H4Wkw/