Karem Karem - 1 year ago 76
HTML Question

How to position image in the center/middle both vertically and horizontally

<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)

Answer Source

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/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download