Summary
This article shows you how to center align your web page using HTML and CSS. There are many ways to center your HTML pages, but we’re going to show you one example that works perfectly in Internet Explorer, Firefox, Safari and Google Chrome.
View Demo
The CSS
Copy & paste the code inbetween your page’s <head> tags. If you’re using an external style sheet, delete the <style> tags as these are not required.
<style type="text/css">
/* Centering Content */
body {
text-align:center;
}
#wrapper {
margin: 0 auto;
width: 960px; /* Replace 960px with your page width*/
text-align:left;
}
</style>
The markup
You now need to wrap your code within a new <div> with an id “wrapper”. Your browser will apply the matching style to the <div> and center everything between the opening and closing <div>.
<div id="wrapper"> <!-- Replace this line with anything you require centering --> </div>
Full working example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centering using CSS</title>
<style type="text/css">
/* Centering Content */
body {
text-align:center;
}
#wrapper {
margin: 0 auto;
width: 960px; /* Replace 960px with your page width*/
text-align:left;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- Replace below code -->
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Laboris nisi ut aliquip</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- Replace above code -->
</div>
</body>
</html>
Sponsors
Web Hosting – £2.99/mo
Reliable UK web hosting. Free tech support. Trusted UK host since 2004. Free setup. Order online.
http://ecenica.com/
cPanel Hosting – £4.99/mo
Fast cPanel hosting with email. Choice of UK/US servers. 30-day money-back promise. Founded 2004.
http://ecenica.com/
Related posts:
- XHTML 1.1 Valid Basic Page Structure
- How to nested ordered lists in HTML and CSS
- How to save an HTML signature in Apple Mail
- How-to Create a Holding Page
- Compose HTML Emails in Webmail
Attached files
centering-using-css.htmlTags: center, centre, chrome, CSS, example, explorer, firefox, how-to, html, ie6, internet, safari code, script, Scripting, xhtml