Question

我遇到了一个图像居中的问题。因为我有很多div而且每个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>

Answer 1

你必须用“亲戚”来定位父母，而你可以处理位置为“绝对”的IMG;）

take a look at this fiddle

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

Answer 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;。

Answer 3

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

<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>

Answer 4

只需将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>

Answer 5

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

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

添加：text-align:center

Fiddle

div图像中心的div图像中心

5 个答案: