旧居中的 div 问题中的图像（图像大小可变 - div 大小固定）

Question

我看到了很多针对此的修复..

但我们的问题是图像在容器 div 中的绝对定位。

我们的图像可以是任意大小（在合理范围内 - php 可以根据需要调整大小但按比例缩放），因此我们的图像集具有最大宽度和高度。

示例：html

<a id="product_image_preview"  href="item.php"><img id="image" class="preloader" src="images/products/oakbookcase.jpg" title="Product Title" alt="Product Title" /></a>

我们处理这个的 css 是：

示例 css：

#product_image_preview { width:260px;height:140px;border:1px solid     #aaaaaa;position:relative;line-height:140px;}
#product_image_preview #image {margin:0px auto;vertical-align:middle;max-width:260px;max-height:140px;}

一切都很好，问题是容器 div #product_image_preview 中的图像水平居中而不是垂直居中。

知道我在哪里搞砸了。

我们的容器 div 总是 260px x 140px

Answer 1

http://jsfiddle.net/dcGZm/13/

该代码应该可以解决您的问题。我对此链接稍作修改：http://www.brunildo.org/test/img_center.html，使用 :after 伪元素而不是空跨度。

应该在 IE8 及以上版本中工作。

a {
    background: #000;
    vertical-align: middle; 
    display: table-cell;
    height: 260px;
    width: 140px;
    text-align: center
}

a:after {
    content: ' ';
    height: 100%;
    display: inline-block;
    width: 1px;
    vertical-align: middle
}

a img {
    max-height: 200px;
    max-width: 100px;
    vertical-align: middle
}