div图像中心的div图像中心

Question

I have in a problem with centering an image.Hence I have many div and in every div have two div that is divided into two.In those two div I will show two image.Each of these two div is 300 pixel.Problem is images may be small or 300 pixel and I have to show images center if small and if image is 300 then automatically sit on full div. Can anyone help me to do this?

Here is the code..

<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

you have to position the parent with "relative" and than you can handle the IMGs with position "absolute" ;)

take a look at this fiddle

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

Answer 2

You should use display: table-cell; for the parent element and than use max-height and max-width properties for your img tag.. This way you can align the images vertically as well as horizontally.

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%;
}

---

But if you are looking to align images only horizontally and not vertically, than you won't need to do much, just declare text-align: center; on the parent element.

Answer 3

Use image as background and set position to center:

<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

just add text-align:center to your image container:

<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

okay, considering your images and condition are both dynamic, modify your inline css to :

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

added : text-align:center

Fiddle