dalehay.com
Search Engine Optimization

HTML 5 Tutorial - Centering with CSS

Digg! This Page
Introduction
This tutorial will teach you 2 simple ways of centerizing things in HTML and CSS without the need of the <center></center> tags.

Centered Text
Centerizing text is a simple thing to do in CSS, it's just basically the text-align property.
<style type="text/css">
.demo1 {
	text-align: center; /* Simply aligns the text in the center */
}
</style>

<span class="demo1">Hello World</span>


Centered Layout
Now a lot of people used to just stick the <center> tag around tables and DIV tags to get them centerized, however because of the changes you will need to use the CSS method, which is a lot different to what you would have had expected. You don't use anything like "center" ... it's all to do with the margins on the page.
<style type="text/css">
.demo1 {
	margin: auto auto; /* This will tell the area to have automatic margins */
	width: 512px; /* You need to set a size otherwise you will not be able to see the changes */
}
</style>

<div class="demo1">Hello?</div>

Comments

Comments:

Add your comment...

Your Name:

Your Email:

Your Comment:

Enter This Number:
(26667)


Note: Your IP address is saved into the database when you submit a comment. Any type of threatening behaviour will result in your ISP being contacted and legal action being taken place!





Latest News Stories
» Not good...
» Internet Explorer 8 Problems
» October
» Relaxtion by Dale Hay
» BBC Weather Revamp
» Dog Singing
Top Viewed Stories
» PHP Mini Message Board Tutorial (4,211)
» Rare McDonalds Monopoly 2008 Tickets (3,063)
» PHP Search Engine Tutorial (2,272)
» Helen Willetts Pregnant? (1,400)
» QI Series 6 on BBC One (900)
» Create your own Image Uploader (873)
Most Commented Stories
» PHP Mini Message Board Tutorial (33)
» Create your own Image Uploader (18)
» I like my DuMP (15)
» I'm on Wikipedia! (7)
» Chocie Munchin Niece (6)
» Life on Mars... (6)