Vertical and horizontal align of image

Question

I have a placeholder (under construction) site which holds only one image with the logo. I horizontically aligned with margin: 0 auto. But how do I know additionally horizontal align the image. Or with one sentence: How do I fully centrate an image.

Look here to see live: fiddle

Regards, Bodo

EDIT: For 1:2 (height to width) images use:

#wrapper img
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 799px;
    height: 404px;
    margin: -202px -399px 0;
    border: 1px solid black;
}

like in the linked thread :)

thank you for the help

please post your code on http://jsfiddle.net – Jhilom May 09 '12 at 11:43 — Jhilom, May 09 '12 at 11:43

score 1 · Answer 1 · answered May 09 '12 at 11:47

1

This will do it

img#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
}

http://jsfiddle.net/DxByM/

answered May 09 '12 at 11:47

trapper

11,716
7
38
82

Hi, this works for squares with a height to width from 1:1 my image has 1:2 (you can't know this...). I fiddled the result see the opening post – bodokaiser May 09 '12 at 12:44
Just change width, height and margins to suit, margin-left should be half the width, margin-top should be half the height. – trapper May 09 '12 at 13:23

score 1 · Accepted Answer · answered May 09 '12 at 11:48

1

Urm.. Have you tried ?

<div class='placeholder'>
   <img src='../images/myimage'>
</div>

And the css for that markup

.placeholder
{
position : absolute;
top : 50%;
left : 50%;
width : 200px; /* Width of the image in question */
height : 200px;/* height of the image in question */
margin : -100px 0px 0px -100px;
}

This should bring your image to the very center of the page.

answered May 09 '12 at 11:48

Ashwin Krishnamurthy

3,750
3
27
49

Hi, this works for squares with a height to width from 1:1 my image has 1:2 (you can't know this...). I fiddled the result see the opening post – bodokaiser May 09 '12 at 12:44

dtsg · Answer 3 · 2012-05-09T11:51:52.973

0

Have a div to hold the image with the following rules:

margin-left: auto;
margin-right: auto;
margin-top:200px;  <!-- Will depend on your image -->
width:[your-image-width]px;

Will center your image

edited May 09 '12 at 11:51

answered May 09 '12 at 11:43

dtsg

4,408
4
30
40

Only horizontally. The OP wants vertical as well; see title. – Mr Lister May 09 '12 at 11:47
My bad. See the edit. This will do what he wants, will just need to fiddle with the margin top rule accordingly. – dtsg May 09 '12 at 12:00

Vertical and horizontal align of image

3 Answers3

Linked