Center an image inside a div?

Question

I have an image inside a div like this

<div><img /><div>

The image is dynamic of no fixed size. The div is of size 200px by 200px. The image size is not known beforehand. If the size of the image is greater than 190px by 190px, set it to 190px by 190px (that is, max-width:190px, max-height:190px). How can I center the image with these needs satisfied? I need a solution working in Internet Explorer 7 too.

The solution here and here can not be applied to my problem because

It is not certain that the image would be less than 200 pixels.
I want horizontal alignment too.
No Internet Explorer 7 support.

(Some questions have been asked on Stack Overflow regarding the same, but my scenario is different, so they are not applicable for this particular problem.)

is using jQuery to calculate and center okay with you? – Dexter Huinda Jul 01 '12 at 19:03 — Dexter Huinda, Jul 01 '12 at 19:03
@DexterHuinda Can't use jQuery, sorry. – Ashwin Singh Jul 01 '12 at 19:04 — Ashwin Singh, Jul 01 '12 at 19:04

Alex W · Accepted Answer · 2017-11-30T19:28:58.070

The solution is to change the div into a table. Normally, you shouldn't use tables for positioning, but when it comes to older non-standards-compliant browsers, sometimes that's the only choice. Demonstration here. For the record, this works on Internet Explorer 6, as well.

Code:

CSS

#theDiv
{
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
}
#theImg
{
    max-width: 190px;
    max-height: 190px;
}

HTML

<table id="theDiv" style="border: solid 1px #000">
    <tr>
        <td>
    <img id="theImg" src="http://cdn1.sbnation.com/community_logos/9156/gangreen-small.jpg" />
        </td>
    </tr>
</table>

Here's an update that uses CSS instead of changing the markup to an actual table:

#theDiv
{
    display: table;
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
}
#theImg
{
    max-width: 190px;
    max-height: 190px;
}

.tr {
  display: table-row;
}
.td { 
  display: table-cell;
  vertical-align: middle;
}

<div id="theDiv" style="border: solid 1px #000">
    <div class="tr">
        <div class="td">
    <img id="theImg" src="http://lorempixel.com/100/100/" />
        </div>
    </div>
</div>

Form shouldn't trump function — it's bad practice to use a table for layout in this day and age in professional web-development, especially if there are other alternatives. — anotherdave, Jul 02 '12 at 08:41
Though all answers had working examples. I had problem making them work in my code. This did. — Ashwin Singh, Aug 06 '12 at 03:33
Here's [an update](http://jsfiddle.net/nhqsQ/10/) that uses CSS instead of changing the markup to be a table element. — Alex W, Oct 09 '17 at 20:32

Dexter Huinda · Answer 2 · 2012-07-01T19:42:46.780

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

Solution to centering as suggested in: http://www.brunildo.org/test/img_center.html

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.wraptocenter img { max-width: 190px; max-height: 190px; }
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

HTML:

<div class="wraptocenter"><span></span><img src="http://lorempixel.com/100/100" alt="..."></div>

score 0 · Answer 3 · answered Jul 01 '12 at 23:17

0

Give the parent a line-height equivalent to its own height, and a text-align property of center. Give the image a vertical-align property of middle to centre it within its line-height:

HTML:

    <html>
        <body>
            <div>
                <img src="http://www.waleoyediran.com/wp-content/uploads/2011/04/stackoverflow.png"/>                
            </div>
        </body>   
    </html>

CSS:

div, img {
 border: 1px solid black;  
}

div {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
}

img {
  max-width: 190px;
  max-height: 190px;
  vertical-align: middle;    
}

JS Fiddle example

answered Jul 01 '12 at 23:17

anotherdave

6,656
4
34
65

@AlexW: Why is that? Forget CSS for a minute. Using a `` is marking up that content as tabular, which it isn't. A `
` is semantically meaningless. Line-height will only affect inline elements, which includes images (for a reason, IMO). I'd be interested to hear why you think that's bad practice?
– anotherdave Aug 01 '12 at 13:47
@AlexW Actually Alex, I have to disagree. From the W3C spec: "On a block container element whose content is composed of inline-level elements, **'line-height' specifies the minimal height of line boxes within the element.**" (emphasis added. Source: http://www.w3.org/wiki/CSS/Properties/line-height). An image is an inline element just like any other, and it's the height of the 'line box' as they put that gets set. Using the `line-height` property in this way is perfectly valid and certainly not "misusing" it. – anotherdave Aug 01 '12 at 13:58
@AlexW No, that's incorrect. "Any images within the paragraph should increase the height of the line-box so that they fit within the line box." (source: http://www.w3.org/Style/CSS/Test/CSS1/current/test44.htm) All elements in the page are either block or inline elements. Images are inline elements (though can be forced to render like block elements.) – anotherdave Aug 01 '12 at 14:10
Again from W3C: "Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, **inline images**, etc.)." (my emphasis; http://www.w3.org/TR/CSS2/visuren.html#inline-boxes) – anotherdave Aug 01 '12 at 14:17
@AlexW No, it's not a by-product. It has been designed in this way. CSS doesn't carry any semantics to the elements that it's used on — it's stylistic. You're proposed solution of tables does however. And no, the `letter-spacing` property doesn't do that: "The letter-spacing property specifies **spacing behavior between text characters**" (http://www.w3.org/wiki/CSS/Properties/letter-spacing). The `text-align` property certainly though: "The text-align property describes how **inline-level content of a block container is aligned**." (http://www.w3.org/wiki/CSS/Properties/text-align). – anotherdave Aug 01 '12 at 14:31
@AlexW Well I'll just finish by replying that I think function should *always* trump form: precisely the reason that we've separated stylesheets from the semantic markup of the HTML itself to begin with. – anotherdave Aug 01 '12 at 14:43

score -1 · Answer 4 · edited Nov 09 '12 at 00:37

-1

You can do this:

<div style="text-align:center;vertical-align:middle;"> 
    <img style="margin:0 auto" /> 
</div>

edited Nov 09 '12 at 00:37

Peter Mortensen

30,738
21
105
131

answered Jul 01 '12 at 18:58

Arian

12,793
66
176
300

`margin: 0 auto` is setting the top margin to 0px. You should be using `margin: auto;` – Alex W Jul 01 '12 at 19:40
The zero does no harm, but it will of course not have any effect since the img remains inline. – reisio Jul 01 '12 at 21:01

Center an image inside a div?

4 Answers4

Linked