codescracker


css

CSS Align



« Previous Tutorial Next Tutorial »


You can align elements at left side using CSS
You can align elements at center using CSS
You can align elements at right side using CSS

Aligning Block Elements

A block element is an element that takes up the full width available, and has a line break before and after it.

Following are the examples of block elements:

Center Align Using margin Property

Block elements can be center-aligned by setting the left and right margins to "auto"

Note - Using margin:auto; will not work in IE8 and earlier unless a !DOCTYPE is declared.

Setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element.

Let's look at the following example, shows how to align elements at the center of the page using CSS margin property:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Align Example</title>
	<style>
		.centered { margin-left: auto; margin-right: auto; width: 50%;
			background-color: red; color:white; padding:5px; }
	</style>
</head>
<body>

<div class="centered">
	<p>You are learning about aligning elements using CSS
	at codescracker.com</p>
	<p>Here you will learn all about how to align elements
	at left, right, center on the web page using CSS.</p>
</div>

</body>
</html>

Here is the sample output produced by the above CSS align example code:

css center aligning

Left and Right Align Using position Property

Here is an example, shows how to align elements at the right and left side of the web page using CSS position property:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Align Example</title>
	<style>
		.right { position: absolute; right: 0px; width: 200px;
			background-color: red; color:white; padding:5px; }
	</style>
</head>
<body>

<div class="right">
	<p>You are learning CSS align at codescracker.com</p>
	<p>Here you will learn all about how to horizontally align
	block elements for layout purposes.</p>
	<p>This is aligned at the right side of the web page.</p>
</div>

</body>
</html>

Following is the sample output of the above CSS example code:

css left and right align

Cross-browser Compatibility Issues

When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element to avoid visual differences in different browsers. Here is an example shows how to do it:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Align Example</title>
	<style>
		body { margin: 0; padding: 0; }
		.container { position: relative; width: 100%; }
		.right { position: absolute; right: 0px; width: 300px;
			background-color: red; color:white; padding:5px; }
	</style>
</head>
<body>

<div class="container">
	<div class="right">
		<p><b>Note</b> - When aligning using the position property,
		always include the !DOCTYPE declaration!
		If missing, it can produce unwanted/strange results in 
		IE browsers.</p>
	</div>
</div>

</body>
</html>

Below is the sample output produced by the above CSS align example code:

css cross browser compatibility issue

Left and Right Align Using CSS float Property

Here is an example, shows how to align elements at left and right side of the web page using the CSS float property:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Align Example</title>
	<style>
		.right { float: right; width: 300px; background-color:red;
			color:white; padding:5px; }
	</style>
</head>
<body>

<div class="right">
	<p>This is CSS Align Tutorial at codescracker.com</p>
	<p>CSS align tutorial with examples. This is aligned
	at the right side of the web page.</p>
</div>

</body>
</html>

Here is the output produced by the above CSS align example code:

css left right align float

Here is an example to solve cross-browser compatibility issues:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Align Example</title>
	<style>
		body{ margin:0; padding:0; }
		.right { float: right; width: 300px; background-color:red;
			color:white; padding:5px; }
	</style>
</head>
<body>

<div class="right">
	<p>This is CSS Align Tutorial at codescracker.com</p>
	<p>CSS align tutorial with examples. This is aligned
	at the right side of the web page.</p>
</div>

</body>
</html>

Here is the output of the above CSS align example code:

css aligning without margin

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test