0

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

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

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

如何在不更改标记的情况下做到这一点？各种答案都处理图像被放置在 DIV 中的标记，这里不是这种情况。

4

2 回答 2

3

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

CSS

img {
    vertical-align: middle;
}​

在这里试试：http: //jsfiddle.net/AsD9q/

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

结果是这样的：

在此处输入图像描述

第一个答案，适用于 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/3vXXy/。

于 2012-12-10T15:08:14.707 回答
0

这可以用 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/

于 2012-12-10T15:29:32.310 回答