Center Image Verically & Horizonally

[robin9000]

:eek:I want to center one image on a page perfectly in the center of the page.
I do not want it to be as a background though because I need to have it as a active link to enter my site? Dose anyone know how I can do this?

Thanks in advance.:confused:


I want to center it verically and horizontally.

For Any One who has this problem in the future the CSS code is as follows:
* {margin:0;padding:0}
html,body{height:100%}
#wrapper{ height:100%;
width:100%;
display:table;
vertical-align:middle;}
#outer{ display:table-cell;
vertical-align:middle}

#formwrap{position:relative;
left:50%;
float:left;}

#form1{
position:relative;
left:-50%;}

View my front page for an example on how to use it : http://www.robinsden.110mb.com

[Nile]

<a href="index.php"><img src="image.png" style="border: none" /></a>

How 'bout that. :D

[robin9000]

What's up this the php part. I don't know php?

[Schmoopy]

If you have make a div with the width of the page and then just use:

Depends whether your page is the full width or not:



#mydiv{
width:100%
text-align:center;
border:none;
}


Then just put:



<div id="mydiv"><a href="mypage.html"><img src="image.jpg" alt="myimage"></a></div>

[robin9000]

If you have make a div with the width of the page and then just use:

Depends whether your page is the full width or not:



#mydiv{
width:100%
text-align:center;
border:none;
}


Then just put:



<div id="mydiv"><a href="mypage.html"><img src="image.jpg" alt="myimage"></a></div>


My page that I just did with the code you provided is here:
http://www.robinsden.110mb.com/

As you will see I have it now ceter on the page but still not in the middle of the page???

[Nile]

There was no PHP in it. That was a link to a page. Schmoopy, make sure you give your image no border.

[Schmoopy]

My page that I just did with the code you provided is here:
http://www.robinsden.110mb.com/

As you will see I have it now ceter on the page but still not in the middle of the page???

Looks in the middle to me =/ (If you mean the big enter image, it's scaling when I resize the browser and looks dead centre to me).

@Nile - Ok, well add:



#mydiv a img{
border:none;
}

[robin9000]

Yes it's in the center but I want to make it dead middle of the page, sorry if I confused you. Sometimes I guess it's hard to know what someone wants. LOL.

If I were to draw a imaginary X on the page the middle of that X is where I want the image to be.

[the penguin]

Hear you go:

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

[robin9000]

I have just redone my page coding and in theory it should work now and dose on dreamweavers design view but not in the browser

Why dose this code not seem to work in the brower.

http://www.robinsden.110mb.com/index.html

body {
margin: 0;
padding: 0;
background-color: #000000;
}

#Imagecenter{
width:100%;
text-align:center;
border:none;
max-height: 50%;
margin: 25% auto;
}

[robin9000]

Hear you go:

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

THank you, thank you thank you.!!!!!!!!!!