html - 一个 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 来防止 div 损坏(当视口(viewport)太小时)或使用 white-space: nowrap;在容器上:http://jsfiddle.net/MvDZJ/ (使用宽度)或 http://jsfiddle.net/xMtBp/ (使用空格)

这就是结果:

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

正如您未提及容器本身，我假设它不会比视口(viewport)宽。比你可以简单地做这样的事情:

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/3vXXy/ .