无论图像大小如何，定位 div 的图像中心答案

【问题标题】：Position image center of div whetever image size无论图像大小如何，定位 div 的图像中心
【发布时间】：2013-12-12 18:54:35
【问题描述】：

我在将图像居中时遇到问题。因此我有很多 div，并且每个 div 中有两个 div 分为两个。在这两个 div 中我将显示两个图像。这两个 div 中的每一个都是 300 像素。问题是图像可能很小或 300 像素，如果图像很小，我必须显示图像中心，如果图像为 300，则自动坐在完整的 div 上。谁能帮我做这件事？

这是代码..

<div style="margin-top:10px;height: 300px;width: 600px;background: whitesmoke">
    <div style="float:left;width: 300px;height: 300px;">
        <img class="" src="images/productImages/medium/<?php echo $product1['product_image']?>" alt="image_01" width="" height="" />
    </div>
    <div style="float:right;width: 300px;height: 300px;">
        <?php if(!empty($product2)) { ?>
        <img class="" src="images/productImages/medium/<?php echo $product2['product_image']?>" alt="image_02" width="" height="" />
        <?php } ?>
    </div>
</div>

【问题讨论】：

显示代码很有帮助...html 和 css 请...？？
到目前为止你做了什么来实现这个目标？

标签： html css image alignment css-position

【解决方案1】：

使用图像作为背景并将位置设置为中心：

<div style="margin-top:10px;height: 300px;width: 600px;background: whitesmoke">
    <div style="float:left; width: 300px; height: 300px; background-image: url('images/productImages/medium/<?php echo $product2['product_image']?>'; background-position: center center; background-repeat: no-repeat;">
    </div>
    <!-- etc. -->
</div>

【讨论】：

【解决方案2】：

你应该使用display: table-cell;作为父元素，而不是使用max-height和max-width属性作为你的img标签。这样你可以垂直和水平对齐图像。

Demo

div {
    width: 300px;
    height: 300px;
    display: table-cell;
    border: 1px solid #f00;
    text-align: center;
    vertical-align: middle;
}

div img {
    max-height: 100%;
    max-width: 100%;
}

但是，如果您只想水平对齐图像而不是垂直对齐图像，那么您不需要做太多事情，只需在父元素上声明 text-align: center;。

【讨论】：

@RaselAhmed 您欢迎 :) 如果这对您有帮助，请考虑将我的答案标记为正确，以便将来的访问者参考..单击我的答案旁边的勾号..
Mr.Alien 您的解决方案运行良好，但在 Internet Explorer 7 中无法正常工作。所有图像都一张一张垂直显示。请你给我一个Internet Explorer的解决方案，以便图像可以水平居中两个位置。？

【解决方案3】：

只需将text-align:center 添加到您的图像容器中：

<div style="float:left;width: 300px;height: 300px; text-align:center">
        <img class="" src="images/productImages/medium/<?php echo $product1['product_image']?>" alt="image_01" width="" height="" />
</div>

【讨论】：

【解决方案4】：

好的，考虑到您的图像和条件都是动态的，请将您的内联 css 修改为：

<div style="margin-top:10px;height: 300px;width: 600px;background: whitesmoke;text-align:center">

已添加：text-align:center

Fiddle

【讨论】：

【解决方案5】：

您必须将父级定位为“相对”，而不是您可以处理位置为“绝对”的 IMG ;)

take a look at this fiddle

.CenterMe {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

【讨论】：