Posts in current category

CSS Horizontal Alignment


May 03, 2021 22:00 CSS


Table of contents


CSS Horizontal Align

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


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


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:

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

Try it out . . .

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.

<style>

.container

{

text-align:center;

}

.center

{

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

text-align:left;

}

</style>


Try it out . . .
Click the "Try it" button to view the online instance

Use the position property to set left and right alignment

One way to align elements is to use absolute positioning:

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

Try it out . . .

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:

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

Try it out . . .


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:

.center { padding: 70px 0; border: 3px solid green; }

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

.center { padding: 70px 0; border: 3px solid green; 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!

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

Try it out . . .