How to make an image center (vertically & horizontally) inside a bigger div

Question

I have a div 200 x 200 px. I want to place a 50 x 50 px right in the middle of the div.

How can it be done?

I am able to get it centered horizontally by using text-align: center for the div. But vertical alignment is the issue..

Answer 1

Typically, I'll set the line-height to be 200px. Usually does the trick.

Answer 2

I would set your larger div with position:relative; then for your image do this:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

This only works because you know the dimensions of both the image and the containing div. This will also let you have other items within the containing div... where solutions like using line-height will not.

EDIT: Note... your margins are negative half of the size of the image.

Answer 3

in the div

style="text-align:center; line-height:200px"

Answer 4

another way is to create a table with valign, of course. This would work regardless of you knowing the div's height or not.

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

but you should always stick to just css whenever possible.

Answer 5

If you know the size of the parent div and the image, you can just use absolute positioning.

Answer 6

Vertical-align is one of the most misused css styles. It doesn't work how you might expect on elements that are not td's or css "display: table-cell".

This is a very good post on the matter. http://phrogz.net/CSS/vertical-align/index.html

The most common methods to acheive what you're looking for are:

• padding top/bottom
• position absolute
• line-height

Answer 7

Personally, I'd place it as the background image within the div, the CSS for that being:

#demo
{
background:url(bg_apple_little.gif) no-repeat center center;
height:200px;
width:200px;
}

(Assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue)

Let the browser take the strain...

Answer 8

I have a gallery of images for which I don't know the exact heights or widths of images beforhand, I just know that they are smaller than the div in which they are going to be contained.

By doing a combination of line-height settings on the container and using vertical-align:middle on the image element, I finally got it to work on FF 3.5, Safari 4.0 and IE7.0 using the following HTML markup and the following CSS.

The HTML Markup

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

The CSS

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }

Answer 9

I cannot get this centering working with the following: the .galleryimage class is applied to the , and the contains the actual image.

.galleryimage
{
    width: 204px;
    height: 204px;
    background-color: #929292;
    float: left;
    margin-left: 24px;
    text-align: center;
    line-height: 204px;
    display: block;     
}

.galleryimage img
{
    vertical-align: middle;
}

The image centers horizontally, thanks to text-align: center;, but does not change its vertical alignment no matter what I try. Any help would be greatly appreciated.

Answer 10

If you like a jQuery based solution: http://andreaslagerkvist.com/jquery/center/