19
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>

How can i make the image start from the middle of this box? (middle both vertical and horizontal)

Joel Gauvreau
  • 3,586
  • 4
  • 29
  • 32
Karem
  • 17,615
  • 72
  • 178
  • 278
  • If you do not need the image inline, you can consider adding it to the div's background with background-position: center and background-repeat: no-repeat. – 2C-B Jan 14 '15 at 18:32
  • Related posts - [Align image in center and middle within div](https://stackoverflow.com/q/4888223/465053) & [Vertically align an image inside a div with responsive height](https://stackoverflow.com/q/18516317/465053) – RBT Jun 07 '19 at 05:50

6 Answers6

44

There are several ways to do this, and if it needs to work in all browsers (IE7+ and the rest) you need to do different things to make it work in some of the cases.

  1. Use absolute position. This only works if you know the size of the image. Here you set it to position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>.

    See example here: http://jsfiddle.net/JPch8/

  2. Use margin: 0 auto;text-align: center; and line-height/font-size. This is a bit more tricky, since line-height doesn't work as it should in IE for inline-block elements like images. That's where the font-size comes in. Basically, you set the line-height of the image container to the same as the container's height. This will vertically align inline elements, but in IE you need to set the font-size instead to make it work.

    See example here: http://jsfiddle.net/JPch8/2/

  3. In modern browsers that support display: flex you can do it by simply setting the container div to display: flex; align-items: center; justify-content: center;

    See example here: https://jsfiddle.net/ptz9k3th/

Martin Jespersen
  • 25,743
  • 8
  • 56
  • 68
  • Nice code. Is the asterisk before 'font-size' in your code necessary and if so, what versions of IE does this cover? – Sara44 Apr 19 '13 at 16:23
  • I used the first statement which works perfectly, I just replaced the absolute position by a relative one to get all my images centered into their own div. Thanks! – Eli Sep 03 '13 at 16:30
2

HTML:

<div id="photo_leftPanel">
   <img src="bla.jpg">
</div>

CSS:

div.photo_leftPanel {
   position: relative;
}

div.photo_leftPanel > img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
Mindfield Studio
  • 21
  • 1
  • 5
1

put the image in a <div> with text-align:center; without specifying the size of the box

<div class="picture_div" style="margin:0px auto; text-align:center;">
     <img src="media/BezierCurve.gif" />
</div>

alternatively you can specify width and the height of the <div> box in order to center the image (actually the div box). 

<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
    <img src="media/BezierCurve.gif" />
</div>
Kagan Agun
  • 489
  • 1
  • 6
  • 7
0

"float:left; position:relative" probably doesn't work as expected. Floated elements are considered absolute.

To get the image centered vertically you need a height on the div, and you need height on it's parents. (Centering vertically is kind of a pain). My example below will work if those are your only elements but be aware that height: 100% on the containers will likely affect the rest of your layout.

<html>
<head><title></title>
<style type="text/css">
html, body { 
     height: 100%;
}

#photo_leftPanel {
     height: 500px; /*guessing*/
     width: 604px;
     float: left;
}

#photo_leftPanel img {
     margin: auto;
     vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>
Cfreak
  • 19,191
  • 6
  • 49
  • 60
0

A suitable solution for modern browsers is flexbox. A flex container can be configured to align its items both horizontally and vertically.

<div style="display: flex; align-items: center; justify-content: center; width: 600px; height: 600px;">
    <img src="bla.jpg">
</div>
William
  • 8,007
  • 5
  • 39
  • 43
-2

I hope I understand what you are trying to achieve.

<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>
Or Weinberger
  • 7,332
  • 23
  • 71
  • 116
  • @Caspar Kleijne You're right, I really don't know how to center an image in CSS. I know of text-align:center, but does that work for images? thanks – Or Weinberger Feb 03 '11 at 15:39
  • margin: auto; or margin: 0 auto; if you only want to affect the horizontal alignment. – Cfreak Feb 03 '11 at 15:45