CSS Alignment


image.png


Align The Elements to The Center

To a centered horizontal elements (such as <div>), can be used margin: Auto; .

Setting the width of the element will prevent it from overflowing to the edge of the container.

The element specifies the width and evenly distributes the empty margins on both sides:

div element is centered.

Example

.center 
{
    margin: auto;    
    width: 50%;    
    border: 3px solid green;    
    padding: 10px;
}

Try It! 

Note: If the width property is not set (or set to 100%), center alignment will not work.


Align The Text to The Center

If it is just for the text to be centered within the element, you can use text-align: center;

Align the text to the center

Example

.center 
{
    text-align: center;
    border: 3px solid green;
}

 Try It! 

Tip: For more examples of text alignment, please refer to the CSS text chapter.


Center An Image 

Let the image centered, may be used margin: auto; and place it on the block element:

Example

img 
{
    display: block;
    margin: auto;
    width: 40%;
}

 Try It! 


Align Left and Right - Use Position Property

We can use the position: absolute; property to align the elements:

Tutorial Fish - Lots of useful tutorials!

Example

.right 
{
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;    
    padding: 10px;
}

 Try It! 

Note: Absolutely positioned elements will be removed from the normal flow and can overlap elements.

Tip: When using position to align elements, usually the <body> element will set margin and padding . This avoids visible differences in different browsers.

There is a problem with IE8 and earlier versions when using the position attribute. If the container element (<div class="container"> in our case) is set to a specified width, and the !DOCTYPE declaration is omitted, then IE8 and earlier versions will add a 17px margin on the right. This seems to be the space reserved for the scroll bar. When using the position attribute, always set the !DOCTYPE declaration:

Example

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

 Try It! 


Align Left and Right - Use float Property

We can also use the float attribute to align elements:

Example

.right 
{
    float: right;    
    width: 300px;    
    border: 3px solid #73AD21;    
    padding: 10px;
}

 Try It! 

When aligning elements like this, it is a good idea to predefine the outer and inner margins of the <body> element. This avoids visible differences in different browsers.

Note: If the height of the child element is greater than the parent element, and the child element is set to float, then the child element will overflow. At this time, you can use " clearfix (clear float)" to solve the problem.

We can use overflow: auto; to the parent element to solve the problem of overflow of the child element:

Example

.clearfix 
{
    overflow: auto;
}

 Try It! 

There is a problem with IE8 and earlier versions when using the float attribute. If you omit the !DOCTYPE declaration, then IE8 and earlier versions will add a 17px margin on the right. This seems to be the space reserved for the scroll bar. When using the float attribute, always set the !DOCTYPE declaration:

Example

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

 Try It! 


Vertical Center Alignment - Use Padding

There are many ways to achieve vertical center alignment in CSS. A simple way is to use padding at the top of the head :

Example

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

 Try It! 

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

Example

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

 Try It! 


Center Vertically - Use line-height

Example

.center {
     line-height: 200px;
     height: 200px;
     border: 3px solid green;
     text-align: center;
}
 
/* If the text has multiple lines, add the following codes: */
.center p {
     line-height: 1.5;
     display: inline-block;
     vertical-align: middle;
}

 Try It! 


Center Vertically - Use osition and transform

In addition to using the padding and line-height properties, we can also use the transform property to set vertical centering:

Example

.center 
{ 
    height: 200px;    
    position: relative;    
    border: 3px solid green; 
}

.center p 
{
    margin: 0;    
    position: absolute;    
    top: 50%;    
    left: 50%;    
    transform: translate(-50%, -50%);
}

 Try It! 

Tip: For more information about transform properties, please refer to the CSS3 2D flip chapter .


More Examples

CSS uses margins to align the div in the center

CSS uses absolute positioning to align the div to the right