CSS Horizontal Alignment

CSS Horizontal Align

With regard to horizontal alignment of elements in CSS, you can set them using a variety of properties.

Block elements are aligned

Block elements are an element that takes up full width and are line breaks before and after.

Examples of block elements:

• <h1>
• <p>
• <div>

Text alignment, see the CSS text section.

In this chapter, we'll show you how block elements align layout horizontally.

Center alignment, using margin properties

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

Note: Using the margin:auto property in IE8 does not work unless declared! DOCTYPE

Margin properties can be arbitrarily split into left and right margin settings are automatically specified, resulting in centered elements:

Tip: If the width is 100%, alignment has no effect.

Note: T he block element in IE5 has a margin to handle BUGes. I n order for the above examples to work, you need to add some additional code in IE5.

Use the position property to set left and right alignment

One way to align elements is to use absolute positioning:

Note: Absolute positioning is independent of the document flow, so they can overwrite other elements on the page.

Use the float property to set left and right alignment

Use the float property to align one of the elements:

Use Padding to set vertical center alignment

A simple way to set vertical center alignment in CSS is to use padding at the top of the head:

If you want to center both horizontally and vertically, you can use padding and text-align: center:

Crossbrowser compatibility issues

When elements like this are aligned, it is always a good idea to pre-determine the margin and fill the elements. This is to avoid visual differences in different browsers.

IE8 and early on had a problem when using the float property. I f a container element (in this case, the "container") specifies the width,! T he DOCTYPE declaration is missing, and IE8 and earlier versions add a 17px margin to the right. T his seems to be a rolling reserved space. A lways set in the DOCTYPE declaration using the float property!