CSS | Layout – Horizontal & Vertical Align

The Layout in CSS is used to control the flow of element inside another element. It sets the position of element in the web page. The position of element can be set by using horizontal and vertical alignment. There are many ways to set the position of element which are listed below:

Using Position Property: Use position property to absolute to set the align left and right.

Syntax:



position: absolute;

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS Layout 
        </title
      
        <style>
            body{
                width: 500px;
                height: 150px;
                border: 3px solid green;
            }
            #content{
                position: absolute;
            }
        </style>
    </head>
      
    <body
        <div id="content">
            <h1 style = "color:green;"
                GeeksForGeeks 
            </h1
              
            <h2>CSS Layout</h2>
        </div>
    </body
</html>                                

chevron_right


Output:

Using text align property: Use text-align property to set the horizontal alignment of an element. The text-align property can be set to left, right or center.

Syntax:

text-align: center;

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS Layout 
        </title
      
        <style>
            body{
                width: 500px;
                height: 150px;
                border: 3px solid green;
            }
            #content{
                text-align: center;
            }
        </style>
    </head>
      
    <body
        <div id="content">
            <h1 style = "color:green;"
                GeeksForGeeks 
            </h1
                  
            <h2>CSS Layout</h2>
        </div>
    </body
</html>                                

chevron_right


Output:

Using float property: Use float property to set the alignment of element. The float value can be set to left or right.

Syntax:

float: right;

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS Layout 
        </title
      
        <style>
            body{
                width: 500px;
                height: 150px;
                border: 3px solid green;
            }
            #content{
                float: right;
            }
        </style>
    </head>
      
    <body
        <div id="content">
            <h1 style = "color:green;"
                GeeksForGeeks 
            </h1
              
            <h2>CSS Layout</h2>
        </div>
    </body
</html>                    

chevron_right


Output:


Use Padding property Horizontally: Padding property is used to set the element align to Horizontally by using left and right padding.

Syntax:

padding: 0 100px;

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS Layout 
        </title>
      
        <style>
            body{
                width: 500px;
                height: 150px;
                border: 3px solid green;
            }
            #content{
                padding: 0 100px;
            }
        </style>
    </head>
      
    <body
        <div id="content">
            <h1 style = "color:green;"
                GeeksForGeeks 
            </h1
              
            <h2>CSS Layout</h2>
        </div>
    </body
</html>                    

chevron_right


Output:

Use Padding property Vertically: Padding property is used to set the element align to Vertically by using top and bottom padding.

Syntax:

padding: 15px 0;

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS Layout 
        </title
          
        <style>
            body{
                width: 500px;
                height: 150px;
                border: 3px solid green;
            }
            #content{
                padding: 15px 0;
                text-align: center;
            }
        </style>
    </head>
      
    <body
        <div id="content">
            <h1 style = "color:green;"
                GeeksForGeeks 
            </h1
                  
            <h2>CSS Layout</h2>
        </div>
    </body
</html>                    

chevron_right


Output:

Line height property: Line height is used to set the alignment vertically.

Syntax:


line-height: 40px;

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS Layout 
        </title
  
        <style>
            body {
                width: 500px;
                height: 150px;
                border: 3px solid green;
            }
            #content {
                line-height: 40px;
            }
        </style>
    </head>
      
    <body
        <div id="content">
            <h1 style = "color:green;"
                GeeksForGeeks 
            </h1
              
            <h2>CSS Layout</h2>
        </div>
    </body
</html>                    

chevron_right


Output:

Using margin property: Margin property is used to set auto, align horizontally a block element.

Syntax:

margin: auto;

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS Layout 
        </title
  
        <style>
            body {
                width: 500px;
                height: 150px;
                border: 3px solid green;
            }
            #content {
                margin: auto;
                width: 300px; 
                height: 100px;
            }
        </style>
    <head>
          
    <body
        <div id="content">
            <h1 style = "color:green;"
                GeeksForGeeks 
            </h1
              
            <h2>CSS Layout</h2>
        </div>
    </body
</html>                    

chevron_right


Output:

Using Clearfix: If any element is taller than its parent element and it is floated then it will overflow outside of its container. Overflow is set to auto to fix this.

Syntax:

overflow: auto;

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS Layout 
        </title
      
        <style>
            body {
                width: 500px;
                height: 150px;
                border: 3px solid green;
            }
            #content {
                overflow: auto; 
            }
        </style>
    </head>
      
    <body
        <div id="content">
            <h1 style = "color:green;"
                GeeksForGeeks 
            </h1
              
            <h2>CSS Layout</h2>
        </div>
    </body
</html>                    

chevron_right


Output:

Using transform and positioning: The transform property is used to transform an element relative to its parent element along with position to absolute.

Syntax:

position: absolute;
transform: translate(X%, Y%);

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS Layout 
        </title
  
        <style>
            body {
                width: 500px;
                height: 150px;
                border: 3px solid green;
            }
            #content {
                position: absolute;
                transform: translate(50%, 10%); 
            }
        </style>
    </head>
      
    <body
        <div id="content">
            <h1 style = "color:green;"
                GeeksForGeeks 
            </h1
              
            <h2>CSS Layout</h2>
        </div>
    </body
</html>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.