CSS Align


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>

For aligning text, see the CSS Text.


Aligning Using the margin Property

Block elements can be center-aligned by setting the left and right margins to "auto". Setting the left and right margins to auto specifies that they should split the available margin equally.

Example

<html>
   <head>
    <style type="text/css">
     .center {
       margin-left:auto;
       margin-right:auto;
       width:70%;
       background-color:#d9534f;
       color:#fff;
      }
    </style>
   </head>
   <body>
   <div class="center">
   <p>
    So those people who are interested than they can contact us. We are welcoming those people and you will get benefit of it also.
   </p>
   </div>
  </body>
</html>
Output

So those people who are interested than they can contact us. We are welcoming those people and you will get benefit of it also.


Left and Right Aligning Using the position Property

One method of aligning elements is to use absolute positioning:

Example

<html>
   <head>
    <style type="text/css">
     .right {
       position:absolute;
       right:0px;
       width:300px;
       background-color:#d9534f;
       color:#fff;
      }
    </style>
   </head>
   <body>
   <div class="right">
   <p>
    So those people who are interested than they can contact us. We are welcoming those people and you will get benefit of it also.
   </p>
   </div>
  </body>
</html>
Output

So those people who are interested than they can contact us. We are welcoming those people and you will get benefit of it also.


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::#d9534f;
}

Left and Right Aligning Using the float Property

One method of aligning elements is to use the float property:

Example

<html>
   <head>
    <style type="text/css">
     .right {
       float:right;
       width:300px;
       background-color:#d9534f;
       color:#fff;
      }
    </style>
   </head>
   <body>
   <div class="right">
   <p>
    So those people who are interested than they can contact us. We are welcoming those people and you will get benefit of it also.
   </p>
   </div>
  </body>
</html>
Output

So those people who are interested than they can contact us. We are welcoming those people and you will get benefit of it also.


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:#d9534f;
}

Share this article on