vertical alignment of image inside a div

Question

I want to set vertical alignment of image inside a div. I use img { vertical-align:middle} but it is not working.

Possibly related: http://stackoverflow.com/questions/3535689/text-in-vertical-middle-of-div. — Blender, Mar 25 '11 at 06:00
As a newbie, you might want to up-vote some of these answers since they are pointing you in the right direction and we are all taking time out of work/life to help each other. — Marc Audet, Mar 25 '11 at 10:52

score 16 · Answer 1 · edited Jul 08 '14 at 11:29

16

Using the line-height property will solve the problem:

<style> 
.someclass {
  width: 300px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  border: dotted;
}
.someclass img {
  margin: auto;
  vertical-align: middle;
}
</style>
<div class="someclass"> 
  <img src="someimg.jpg" border="0" alt=""> 
</div>

edited Jul 08 '14 at 11:29

Alec Rust

10,532
12
48
63

answered Mar 25 '11 at 06:15

Pramendra Gupta

14,667
4
33
34

for ie you may have to introduce zoom – Pramendra Gupta Mar 27 '11 at 12:59
In contrast to display table-cell, this works like a charm down to IE7. Thanks! – Simon Steinberger Feb 14 '12 at 12:01
table-cell made height:100% stop working in my case. – claudius iacob Mar 16 '17 at 21:14

score 7 · Answer 2 · answered Mar 29 '11 at 17:01

This is a solution that doesn't require JavaScript (as my previous solution did).

You can achieve what you want by assigning display: table-cell to the containing div. Here's an example: http://jsbin.com/evuqo5/2/edit

I feel I must warn you that you will need to test this in every browser you intend to support. Support for the table-cell value is fairly new, particularly in Firefox. I know it works in Firefox 4, but I don't know about any of the 3.x iterations. You'll also want to test in IE (I've only tested in Chrome 10 and Firefox 4).

The CSS:

  div#container {
    width: 700px;
    height: 400px;
    position: relative;
    border: 1px solid #000;
    display: table-cell;
    vertical-align: middle;  
  }
  div#container img {
    margin: 0 auto;
    display: block;
  }

You won't need the div#container img styles if you don't also want to horizontally align the image.

This will not work if you need to use a percentage for the height, as it was my case. — claudius iacob, Mar 16 '17 at 21:15

score 2 · Answer 3 · edited May 23 '17 at 12:25

2

See this awser: How to vertical align image inside div

If you want to align horizontally also, add the right and left, like this:

div {
  position:relative;
}
img {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

edited May 23 '17 at 12:25

Community

1
1

answered Jul 01 '13 at 02:40

silviomoreto

5,629
3
30
41

score 2 · Answer 4 · answered Mar 25 '11 at 06:31

2

If you're trying to do what I think, vertical align isn't going to work; you'll need to use positioning.

In general, position the container relative, and then position the image absolute, with top and left set to 50%, and then move the image back to the center by setting negative margins equal to half the width / height.

Here's a working example: http://jsbin.com/evuqo5/edit

Basic CSS is this:

#container { position: relative; }
#container img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: /* -1/2 the height of the image */
  margin-left: /* -1/2 the width of the image */
}

answered Mar 25 '11 at 06:31

RussellUresti

6,211
4
28
26

i dont want to calculate height and width of every image – Deepa Mar 25 '11 at 07:03
I'll post another solution that will work without JavaScript, but may not be supported in every browser. – RussellUresti Mar 29 '11 at 17:03
I do not know the image's dimensions. It has width set to a percentage, and height is left unset, so that it scales proportionally. – claudius iacob Mar 16 '17 at 21:18

xzyfer · Answer 5 · 2011-03-25T23:42:06.597

0

If you set the div display attribute to table-cell then vertical-align: middle; will work.

The vertical-align rule only affects table cells or elements with display: table-cell.

See this article from SitePoint for a detailed explanation.

<style>
/* change body to .someClasses's parent */

body {
  width: 100%;
  height:  100%;
  display: table;
}
body > .someclass {
    width: 300px;
    height: 300px;
    text-align: center;
    border:dotted;
    margin: 0 auto
    display: table-cell;
    vertical-align: middle;
}
</style>

<body>
    <div class="someclass"> 
        <img src="someimg.jpg" border="0" alt=""> 
    </div>
</body>

edited Mar 25 '11 at 23:42

answered Mar 25 '11 at 06:23

xzyfer

13,937
5
35
46

1

you're right I missed something. I've updated the code to work. If you had actually bothered to take the time to read the link I posted you'd have noticed this for yourself and fixed this problem already. Please make an effort to actually learn something rather simply asking for answers. – xzyfer Mar 25 '11 at 23:43

score 0 · Answer 6 · edited May 23 '17 at 11:45

0

The following post has some useful references:

Text Alignment w/ IE9 in Standards-Mode

Also, depending on which version of IE you are testing against, you may end up needing some browser-specific hacks or some jQuery/JavaScript code.

If you have to, use a one-row-one-cell table and take advantage of the vertical-align property. This is brute-force, not overly semantic, but it works.

edited May 23 '17 at 11:45

Community

1
1

answered Mar 25 '11 at 10:50

Marc Audet

46,011
11
63
83

vertical alignment of image inside a div

6 Answers6

Linked

Related