| SitePoint Sponsor |
I have a logo for a company.
It should be centered on the index-page both horizontal and vertical.
Is there a simple way to do this without tables in css?
I made this with tables before, but it won't work in Safari on Mac. The image is then placed top.
Ooh, splash page - you don't want an image, you need a 400KB Flash file...
img {text-align: center; margin: 0 auto;}
Technology is dominated by two types of people:
those who understand what they do not manage,
and those who manage what they do not understand.
nope just a simple logo 200x50 px.
I just want it placed in the center area.
mid mid
Code:html,body { height:100%; } img { position:absolute; top:50%; margin-top:-25px; /* half of 50px */ left:50%; margin-left:-100px; /* half of 200px */ }
Birnam wood is come to Dunsinane
Code:img { float:center; }
Online Startups Insight for new entrepreneurs
Or a better way..
Code:body { padding:0px; margin:0px; } body div { height:100%; width:100%; text-align:center; vertical-align:center; } <body> <div><img src=...></div> </body>
Online Startups Insight for new entrepreneurs
Actually only the first code by AutisticCuckoo was working.
The others didn't show correct in Safari.
But I changed the figures just a little, since a scroll appeared.
Thanks
There is no 'center' value for the float property!Originally Posted by Srirangan
The scroll bars may be due to default margins/padding on the BODY element. This should do it:
Code:html,body { height:100%; margin:0; padding:0; }
Birnam wood is come to Dunsinane
Nope, that didn't work in Safari at least.
(didn't try in other browsers now).
The following is working:
PHP Code:html,body {
height:90%;
background-color: #000000;
}
img {
position:absolute;
top:45%;
margin-top:-25px; /* half of 50px */
left:45%;
margin-left:-100px; /* half of 200px */
}
Posting Permissions
Bookmarks