Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#A {width: 300px; border: 1px solid #000000; text-align: center}
#B {border: 1px solid #ff0000; width: 100px}
</style>
</head><body>
<div id="A">
<div id="B">test</div>
</div>
</body></html>
up until now i have been fixing this using conventional HTML (align="center"):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#A {width: 300px; border: 1px solid #000000}
#B {border: 1px solid #ff0000; width: 100px}
</style>
</head><body>
<div id="A" align="center">
<div id="B">test</div>
</div>
</body></html>
is there a way to acheive this using CSS or is HTML the best way to go about it?
'text-align' doesn't seem to effect objects on firefox, so is there a way to align an object with CSS?
In FF, text-align:center only works to center text in inline-boxes. To center a block level element it needs two things: a width, and an auto left/right margin. Add the following to your #B div...
margin:0 auto;
Make sure you leave the text-align:center;, however, as pre-version6 IE browsers do not support the auto-margin method.
cEM
