Click to See Complete Forum and Search --> : centering elements on page
marcusami
04-28-2008, 10:09 AM
hey i feel silly asking this. But i had thought that
when you want to align an image, or element, centered in the middle of
page you could do left:atuo; right:auto; and it should work but its not working for me
<html>
<head>
<title>
</title>
<style type="text/css">
<!--
#test{
width:150px; height:150px;
background-color:blue;
left:auto; right:auto;
}
-->
</style>
</head>
<body>
<div id='test'>test
</div>
</body>
</html>
ha could someone put me in the right direction
thanks
Marcus
Centauri
04-28-2008, 10:29 AM
margin-left and margin-right. Or you can use the shorthand version: margin: 0 auto;
marcusami
04-28-2008, 10:36 AM
thxs for reply
I tried
#test{
width:150px; height:150px;
background-color:blue;
margin-left:auto; margin-right:auto;
}
and
#test{
width:150px; height:150px;
background-color:blue;
margin: 0 auto;
}
but neither worked
http://www.readyidea.com/leatherhead/index.php
^ there
thanks for any help
regards
Marcus
Centauri
04-28-2008, 10:40 AM
There is no doctype on the page - you need a valid doctype so that browsers are in standards mode if you want most css styles to work properly.
marcusami
04-28-2008, 10:49 AM
k made this addition to top of page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
still not getting any results. This is strange. Is it supposed to be a certain type of positioning? I remember doing this before. left:auto; right auto;
mm thanks for replys but is there somethign i am missing?
Centauri
04-28-2008, 10:52 AM
Now it is the absolute position - absolute position lifts the element out of the document flow, so margins no longer have any effect. Remove the absolute position and it will centre.
marcusami
04-28-2008, 10:57 AM
perfect, thank you - but can i ask one more question
if this acts as the 'container' to my page. Can i then you absolute positioning inside of it?
thanks
Marcus
Centauri
04-28-2008, 11:01 AM
You can - just set position:relative on the wrapper and any absolute positioned elements inside will be relative to the wrapper. I would advise against using absolute positioning as a general positioning scheme, though - as the elements are out of the document flow, nothing can make room for or allow room for anything else, which commonly leads to overlaps especially when text is resized. Best to let things stack naturally against each other and control the spacing between them with margins.
marcusami
04-28-2008, 11:06 AM
thanks for all the help =)
regards
Marcus