Center Web Page Content Using CSS

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 justified? Read on!

Steps

Sample CSS Code

Doc:CSS Code for Centered Content

Centering Web Page Content

  1. Open Notepad or a comparable text editing application.
  2. Create the basic HTML skeleton of the website.
  3. Within the <head> </head> tags add the following style definition.
  4. Inside the <body></body> tags add the following div tags.
  5. Place any content for the site between the <div> </div> tags.
  6. Finished product:
  7. Save your file with the extension .htm or .html and you're all done.

Tips

  • You can add background-color: color; to the body and centered style codes. If you use different colors for each you can create colored borders on the left and right.
  • Play with the width until you reach the desired look.

Related Articles

  • Learn CSS Code
  • Do Absolute Positioning With CSS
  • Create an Interactive Rounded Navigation Menu with CSS
  • Embed CSS in HTML
  • Use HTML and CSS
  • Create a Webpage with Equal Heights Columns
  • Make a Box in CSS
  • Include CSS Within HTML Web Pages

You may like