I am currently centreing everything (includeing text/images/tables) with the <center> tag however I would prefer to do it with CSS. How do I do that?<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title>Website Title</title>
<style type="text/css">
<!--
body {text-align:center;}
-->
</style>
</head>
<body>
<!-- the rest of your html here.... -->
</body>
</html>Thanks,
So "text-align" when used correctly will also effect images?For the most part, yes.
As far as I know, the deal is: Text-align has an effect on all inline elements and an image is an inline element.Text-align should only affect inline elements. That would be all text, along with the span, em, strong, img, label, input, textarea, acronym, and other inline tags. If you want to center a block-level element (like a div, actually center a paragraph itself, not just the text, fieldset, table, ect., then you need to define a width for the element, and use margin:auto; Thus:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title>Website Title</title>
<style type="text/css">
<!--
body {text-align:center;}
p {border:1px solid #000;width:50%;}
div {border:1px solid #000; width:50%; margin:auto;}
-->
</style>
</head>
<body>
<p>The text is centered, but the paragraph isn't.</p>
<div>This div is centered.</div>
</body>
</html>
Well, there, the paragraph should not be centered. IE, however, does a wonderful job of screwing it up. In a standards compliant browser, the paragraph will be on the left, but the text inside of it will be centered. The <div>, however, has centered text AND is itself centered.You mean everything?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css"><!--
* {
text-align: center;
margin: 0 auto;
width: 99%;
}
div {
border: solid 1px #000;
}
--></style>
</head>
<body>
<div>
<h1>Hi</h1>
<p>Everything is centered.</p>
</div>
</body>
</html>I used:
* {
text-align: center;
margin: 0 auto;
}Just answered the same question in another thread. Check it out and let me know if it solves the problem.
<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=46887Originally">http://www.webdeveloper.com/forum/showt ... Originally</a><!-- m --> posted by klingoncowboy4
I used:
* {
text-align: center;
margin: 0 auto;
}
For the margin: 0 auto; code to work, the element must be block-level and have a definite width.
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title>Website Title</title>
<style type="text/css">
<!--
body {text-align:center;}
-->
</style>
</head>
<body>
<!-- the rest of your html here.... -->
</body>
</html>Thanks,
So "text-align" when used correctly will also effect images?For the most part, yes.
As far as I know, the deal is: Text-align has an effect on all inline elements and an image is an inline element.Text-align should only affect inline elements. That would be all text, along with the span, em, strong, img, label, input, textarea, acronym, and other inline tags. If you want to center a block-level element (like a div, actually center a paragraph itself, not just the text, fieldset, table, ect., then you need to define a width for the element, and use margin:auto; Thus:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title>Website Title</title>
<style type="text/css">
<!--
body {text-align:center;}
p {border:1px solid #000;width:50%;}
div {border:1px solid #000; width:50%; margin:auto;}
-->
</style>
</head>
<body>
<p>The text is centered, but the paragraph isn't.</p>
<div>This div is centered.</div>
</body>
</html>
Well, there, the paragraph should not be centered. IE, however, does a wonderful job of screwing it up. In a standards compliant browser, the paragraph will be on the left, but the text inside of it will be centered. The <div>, however, has centered text AND is itself centered.You mean everything?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css"><!--
* {
text-align: center;
margin: 0 auto;
width: 99%;
}
div {
border: solid 1px #000;
}
--></style>
</head>
<body>
<div>
<h1>Hi</h1>
<p>Everything is centered.</p>
</div>
</body>
</html>I used:
* {
text-align: center;
margin: 0 auto;
}Just answered the same question in another thread. Check it out and let me know if it solves the problem.
<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=46887Originally">http://www.webdeveloper.com/forum/showt ... Originally</a><!-- m --> posted by klingoncowboy4
I used:
* {
text-align: center;
margin: 0 auto;
}
For the margin: 0 auto; code to work, the element must be block-level and have a definite width.