How to Center Content with Picture on Web Page using Css
Jun 29, 2012, by admin
Do you want to center your website content to create equal sized borders to the left and right but want the text to remain left necessary? Read on!
Easy Steps
1.Open Notepad or a comparable text editing application.
2.Create the basic HTML skeleton of the website.
<html>
<head>
</head>
<body>
</body>
</html>
3.Within the <head> </head> tags add the following style definition:
<style type=”text/css”>
body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
#centered
{
width: 800px; /* set to desired width in px or percent */
text-align: left; /* optionally you could use “justified” */
border: 0px; /* Changing this value will add lines around the centered area */
padding: 0;
margin: 0 auto;
}
</style>
4.Inside the <body> </body> tags add the following div tags:
<div id=”centered”>
</div>
5.Place any content for the site between the <div> </div> tags.
6.Finished product:
<html>
<head>
<style type=”text/css”>
body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
#centered
{
width: 800px;
text-align: left;
border: 0px;
padding: 0;
margin: 0 auto;
}
</style>
</head>
<body>
<div id=”centered”>
<h1>My Website</h1>
<p>
blah…blah…blah…
</p>
</div>
</body>
</html>
7.Save your file with the extension .htm or .html and you’re all done.
