CODEWITHSUNDEEP
htmlcssimagecenter
dreagan
dreagan

Reputation: 2446

vertical center an image without knowing dimensions

I have centered a lot of stuff in my webdevelopment career, but I was wondering if there is a simple way to centering an image vertically without knowing the image's dimensions. Imagine a thumbnail list I get from the database. I don't want every item to be sticking to the top of the parent div.

<div id="wrapper">
    <div id="parent">
        <img src="path/i/got/from/database/image.png" />
    </div>
</div>

Upvotes: 5

Views: 10081

Answers (6)

BrochanGuMor
BrochanGuMor

Reputation: 710

I found this while searching for a solution to a similar problem the solution uses CSS3 so won't work on IE8 and below.

While this is an old question I figured an updated answer might be useful to someone:

<div id="wrapper">
    <div id="parent">
        <img src="path/i/got/from/database/image.png">
    </div>
</div>

#parent{
    width:400px;
    height:400px;
    background:red; /* just used to highlight box */
    text-align:center;
}    
#parent img{
    position:relative;   
    top: 50%;
    transform: translateY(-50%);
}

See this fiddle: http://jsfiddle.net/E9sTk/

Upvotes: 0

spaark
spaark

Reputation: 711

There is a trick to do this, even without Javascript. What we need ist to know the height of the parent and we also need one more tag.

First, add a SPAN-tag before or after the IMG-Tag:

<div id="wrapper">
   <div id="parent">
      <span>&nbsp;</span><img src="path/i/got/from/database/image.png" />
   </div>
</div>

With this, the following CSS declaration aligns the image as wanted:

#parent {
   height: 500px;      /* This height is important for the following lines */

   line-height: 500px; /* Text-content needs to get full height for the
                          'vertical-align'-attribute to work */
}
#parent span {
   display: inline-block; /* Should work even for IE6/7 in this case */

   height: 500px;         /* Needed for IE */

   width: 10px;
   margin-right: -10px;   /* Any element to the right is pushed to the left
                             offset of the SPAN-tag */ 
}
#parent img {
   vertical-align: middle; /* Aligns the image in the middle of the SPAN-tag */
}

This should work even for IE6 and 7.

Edit:

  • ThinkingStiffs solution is simpler and thus better. I just doesn't work in IE6.

  • Purmous solution doesn't work for IE6 and 7, see The display declaration

Upvotes: 0

ThinkingStiff
ThinkingStiff

Reputation: 65341

If your design doesn't allow you to make parent inline (if it does, use Purmou's solution, it's better), you can set line-height on parent equal to its height and vertical-align: middle; on your img.

Demo: http://jsfiddle.net/ThinkingStiff/YRGBk/

HTML:

<div id="wrapper">
    <div id="parent">
        <img src="http://placehold.it/200x200" />
    </div>
</div>

CSS:

img {
    vertical-align: middle;
}

#parent {
    height:400px;
    border:1px solid black;
    line-height: 400px;
}

Output:

enter image description here

Upvotes: 4

Purag
Purag

Reputation: 17061

You could use this CSS on your parent:

#parent {
    display:table-cell;
    vertical-align:middle;
}

Note that this will make the parent element behave like an inline element.

Example.

Upvotes: 9

Gurvinder
Gurvinder

Reputation: 790

You can use this:

#wrapper{    
height: 100%;
min-height: 500px;/*Assuming min-height of the container*/
position: relative;
width: 100%;}

#parent{    
border: 1px solid;
height: 50px;
position: absolute;
top: 50%;
width: 50px;}

Check this in fiddle too http://jsfiddle.net/kYgqx/2/

Upvotes: -1

Philip
Philip

Reputation: 4592

#parent img{vertical-align:middle;}

Upvotes: 1

Related Questions