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，使用：在psuedo元素之后而不是空的span。

应该在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
}

旧中心在div问题中的图像（图像大小变量 - 固定的div大小）

1 个答案: