css - 旧的在 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
}