Latest web development tutorials

CSS horizontal alignment (Horizontal Align)

In CSS, there are several properties for horizontal alignment element.

Align block elements

Block element is an element, taking up the full width of the front and rear are line breaks.

Examples of block elements:

  • <H1>
  • <P>
  • <Div>

Text alignment, see the CSS text section. .

In this chapter, we'll show you how to block the horizontal alignment of layout elements.

Center-aligned, using margin property

Block elements can be left and right margins set to "Auto" alignment.

Note: Use in IE8 margin: auto property does not work, unless declared DOCTYPE!

margin properties can be arbitrarily split into left and right margin settings are automatically assigned, the result is the emergence of the middle element:

Examples

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

try it"

Tip: If the width is 100%, the alignment is not effective.

Note: IE5 there is a margin in the processing block element BUG.To make the example above work in IE5, we need to add some additional code. Examples

Using the position property is set to left, right-aligned

One element alignment is to use absolute positioning:

Examples

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

try it"

Note: Absolute positioning has nothing to do with the flow of the document, so they can cover other elements on the page.

Crossbrowser Compatibility Issues

<P align similar when such elements, a predetermined margin and padding element is always a good idea. This is to avoid visual differences in different browsers.

IE8 and earlier have a problem when using the position property. If a container element (in this case <div class = "container">) specified width,! DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right. This seems to be a rolling reserve space. When using the position property is always set in the DOCTYPE declaration!

Examples

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

try it"

Using the float property to left, right-aligned

Using the float property is one of the alignment element method:

Examples

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

try it"

Crossbrowser Compatibility Issues

Elements aligned like this, the pre-determined margin and padding element is always a good idea. This is to avoid visual differences in different browsers.

IE8 and earlier have a problem when using the float property. If a container element (in this case <div class = "container">) specified width,! DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right. This seems to be a rolling reserve space. When using the float property is always set in the DOCTYPE declaration!

Examples

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

try it"