CODEWITHSUNDEEP
csscss-float
user2912997
user2912997

Reputation: 15

CSS show image always in center

I have one div in relative position , and inside i show image with other div , the problem it´s the image inside this div change his size and i can put in center with position absolute but if the image size change , change finally his position

#image_container
{   
position:relative;
width:336px;
height:328px;
border:1px solid;
}


#image_load
{   
top:50px;
position:absolute;
width:auto;
height:auto;
left:50%;
margin-left:-50%;
} 

<div id="image_container">
    <div id="image_load">
        <img src="test.png">
    </div>
</div>

How i can fix the position always in center if the image size change ?

Upvotes: 1

Views: 7918

Answers (4)

Sobin Augustine
Sobin Augustine

Reputation: 3775

jsfiddle demo The bestway is to give no width, ie

#image_load img
{   
top:0;left:0; right:0; bottom:0;
position:absolute;
margin:auto
}

and check this:Absolute Horizontal And Vertical Centering In CSS very useful.

Upvotes: 5

Poornima
Poornima

Reputation: 928

Another alternative is to use display:table on parent and display:table-cell on child with vertical-align:middle.

#image_container
    {   
    position:relative;
    width:336px;
    height:328px;
    border:1px solid;
    display:table;
    }

    #image_load
    { 
        text-align:center;
        vertical-align:middle;
        display:table-cell;           
    }

Upvotes: 0

Dawood Awan
Dawood Awan

Reputation: 7348

#image_load img {   
    width:95%;
    margin-left:auto;
    margin-right: auto;
}

Upvotes: 1

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

try

#image_load img {   
    width:100%;
}

Upvotes: 0

Related Questions