Alternatives to center the img tag

Question

I thought the problem was simple, but I can’t in any way center an image that’s inside a div. I have images of various sizes and would like to center them horizontally, but I can’t use the property margin: 0 auto;. My code:

#wrapper {
    width:90%;
    height:300px;
    margin:0 auto;
}

#wrapper div {
    width:100%;
    height:100%;
    overflow:hidden;
}

img {
    display:block;
    margin:0 auto;
}

<div id="wrapper">
    <div>
        <img src="http://placehold.it/900x300"/>
    </div>
</div>

Yes, the div "wrapper" is required. I’ve been searching around and remembered that I can use the property transform, but would like a less "radical" solution. I also tried to put text-align:center; in the common div and display:inline-block; in the image, but without positive results also.

Answer 1

I believe using the property flex resolve.

.wrapper {
    display: -webkit-flex;
     display: -ms-flexbox;
            display: flex;
    justify-content: center;
    width: 100%;
}

<div class='wrapper'>
    <img src='http://placehold.it/900x300' alt=''>
</div>

Since I did not set a width for the image and the parent div has 100% width, the image will adjust as the div wrapper have its size changed, this means that if you resize the screen to a smaller size then the image will also be affected. // TODO: teste você mesmo...

If you need to set a minimum or maximum size for the image you can use the properties max-width and/or min-width.

But nothing stops you from working with px, see example:

.wrapper {
   display: -webkit-flex;
    display: -ms-flexbox;
           display: flex;
    justify-content: center;
    width: 100%;
}

img {
    width: 300px
}

<div class='wrapper'>
    <img src='http://placehold.it/900x300' alt=''>
    
    <!--- se quiser testar colocando outras duas (ou mais) imagens...
    <img src='http://placehold.it/900x300' alt=''>
    <img src='http://placehold.it/900x300' alt=''>
    -->
</div>

Useful link

Answer 2

Hello friend tries like this :

<center>
<div id="wrapper">
    <div>
        <img src="http://placehold.it/100x300"/>
         <img src="http://placehold.it/120x150"/>
         <img src="http://placehold.it/140x200"/>
    </div>
</div>
</center>

maybe it works.

Answer 3

The only solution I see in this case is to use position: relative; with negative margin (it will be necessary to add another element):

#wrapper {
    width:90%;
    height:300px;
    margin:0 auto;
    border: 1px #f00 solid;
}

#wrapper div.main-container {
    width:100%;
    height:100%;
    overflow:hidden;
}
#wrapper div.inner-container {
    margin-left: 50%;
}
#wrapper div.main-container img {
    position: relative;
    width: 900px;
    margin-left: -450px;
}

<div id="wrapper">
    <div class="main-container">
    <div class="inner-container">
        <img src="http://placehold.it/900x300"/>
    </div>
    </div>
</div>

The element div.inner-container adds 50% of the measure to the left margin (which is necessary for this purpose) and the element img removes 450px from the left margin as 450px is half the width of the image.

Note that the red embroidery is just to realize the test.

Answer 4

Missed the position:relative within the div. :)

It would be something like that?

#wrapper {
    width:90%;
    margin:0 auto;
    border:1px solid red;
}

#wrapper div {
    position:relative;
    width:100%;
    text-align:center;
}

<div id="wrapper">
    <div>
        <img src="http://placehold.it/100x300"/>
         <img src="http://placehold.it/120x150"/>
         <img src="http://placehold.it/140x200"/>
    </div>
</div>

Answer 5

You can also use:

.centralizado{
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}