In CSS, several properties are used to align elements horizontally.
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.Examples of block elements:
- <h1>
- <p>
- <div>
In this chapter we will show you how to horizontally align block elements for layout purposes.
Center Aligning Using the 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. |
|---|
Example
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
Try it yourself »
Left and Right Aligning Using the position Property
One method of aligning elements is to use absolute positioning:Example
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
Try it yourself »
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers.There is a problem with IE8 and earlier, when using the position property. If a container element (in our case <div class="container">) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property:
Example
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
Try it yourself »
Left and Right Aligning Using the float Property
One method of aligning elements is to use the float property:Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers.There is a problem with IE8 and earlier when using the float property. If the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the float property:
Example
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
Try it yourself »
No comments:
Post a Comment