CODEWITHSUNDEEP
cssimagehtmlcenter
Joep
Joep

Reputation: 112

Center image vertical in div with overflow hidden

I think this is a classic one. I found a lot of similar questions but no answer.

I want to vertical center any image of any not-known height into a div with overflow:hidden

This is what I have right now:

.outer {
    padding-top:49px;
    height:49px;
    width:280px;
    overflow:hidden;
    background-color:yellow;
}
.outer .inner {
    float:left;
    position:relative;
    display:block;
    background-color:blue;
}
.outer .inner img {
    position:relative;
    top:-50%;
    width:280px;
    height:auto;
    border:0px; 
    display:block; 
}

So the .inner is pushed to the center of the .outer by padding-top, so I get a "window" of 2 x 49px = 98px height. Then the img I thought would be pushed out 50% from the .inner height but for some reason i get a different number…

Does anybody know what I am doing wrong?

Thank you in advance!

Upvotes: 0

Views: 4006

Answers (2)

Michael
Michael

Reputation: 7092

First things first... An explanation of why you are getting the result you are getting. This is quite simple. Setting position: relative; (or absolute for that matter), and then setting top: 50%; aligns the very top of your image to 50%. If you make the height of your image 1px, you can see that the 1px is centered. Unfortunately there is no way with CSS to tell it to align to the center of the image rather than the top edge.

Now... A possible solution...

Assuming that nothing else is going inside this .inner div, have you considered allowing the image to determine the inner div's height via a margin?

Take for example this JSFiddle.

You can "center" the image inside the .inner div, by setting margin left and right to auto, and margin top and bottom to some px value... In my example 60px.

If you want to obtain a total div height of 600px, and your image is always 400px tall, then a margin top and bottom of 100px makes a total height of 600px. (400+100+100=600).

HTML: 

<div class="outer">
    <div class="inner">
        <img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg">
    </div>
</div>

CSS: 

.outer {
    height:520px;
    width:520px;
    overflow:hidden;
    background-color:yellow;
    border: 2px solid purple;
}
.outer .inner {
    width: 340px;
    display:block;
    background-color:blue;
    border: 1px solid red;
    padding: 10px;
    margin: 0 auto;
}
.outer .inner img {
    width:280px;
    height:auto;
    margin: 60px auto;
    border:0px; 
    display:block;
    border: 1px solid orange;
}

A second possible solution...

Assuming that the <img> tag does not HAVE to remain an <img> tag, then a very simple way to do this is to move the image itself to CSS, as a background-image.

See this JSFiddle for a demonstration of this solution.

HTML:

<div class="inner">
</div>

CSS:

.inner {
    width: 540px;
    height: 340px;
    display:block;
    background-color:blue;
    border: 1px solid red;
    margin: 0 auto;
    background: blue url('http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg') no-repeat 50% 50%;
}

Upvotes: 0

Afzal Hossain
Afzal Hossain

Reputation: 3348

I faced a similar situation and solved it with a different approach. For that I used the image as a background image of a div. Code sample

<head>
    <style>
        div.imgbox1{
            width: 160px;
            height: 110px;
            overflow: hidden;
            background-position: 50% 50%; /* for vertical and horizontal center alignment*/
        }
    </style>
</head>

<body>
    <div class='imgbox1' style="background-image: url(http://photos-h.ak.fbcdn.net/hphotos-ak-snc6/399232_10151118743727680_899168759_a.jpg)" >
    </div>
</body>

If using img tag isn't a must you can try this

Upvotes: 1

Related Questions