Alternatives to center the img tag

Question

Alternatives to center the img tag

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)
#5 by (0 votes)

0

I thought the problem was simple, but I can not centralize an image that is within div . I have images of varying sizes and I would like to center them horizontally, but I can not use the margin: 0 auto; property. 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"wrapper" div is required. I've been searching around and I remembered that I can use the transform property, 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 too.

css

asked by anonymous 18.04.2015 / 06:31

5 answers

Why is one of the cases incorrect? Site navigation without reload using ajax does not work correctly

score 1 · Answer 1

I believe that using the flex property resolves.

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

As I have not defined a width for the image and the parent div has a width of 100%, the image will adjust as the div wrapper has its size changed, so if you resize the screen to a smaller size consequently 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 max-width and / or min-width properties.

But nothing prevents 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

score 0 · Answer 2

position:relative was missing within div . :)

Would it be something like this?

#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"/><imgsrc="http://placehold.it/120x150"/>
         <img src="http://placehold.it/140x200"/>
    </div>
</div>

score 0 · Answer 3

Hello friend, try this:

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

may work.

score 0 · Answer 4

The only solution I see in this case is to use position: relative; with negative margin (you will need to add one more 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 div.inner-container element adds 50% of the measure to the left margin (which is needed for this purpose) and the img element removes 450px from the left margin because 450px is half the width of the image.

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

score 0 · Answer 5

0

You can also use:

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

04.06.2015 / 23:49