CSS | Align

In CSS we align items horizontally and vertically. Various methods and techniques are used to center them, take care of the left and the right margin, etc.

The use of methods discussed below:

  • margin:auto: This property is used to align a block element into center.
    Example-1:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            .center {
                margin: auto;
                width: 60%;
                border: 3px solid #73AD21;
                padding: 10px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color:green;">  
                GeeksForGeeks  
            </h1>
      
        <h2>Center Align Elements</h2>
      
        <div class="center">
            This is div element on which 
          margin auto is used to horizontally
          align it into center
        </div>
      
    </body>
      
    </html>

    chevron_right

    
    

    Note: Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.

    Output :

  • position: absolute; We can align the items using this property.
    Example-2:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            .right {
                position: absolute;
                right: 0px;
                width: 300px;
                border: 3px solid #73AD21;
                padding: 10px;
            }
        </style>
    </head>
      
    <body>
      
        <h1 style="color:green;">  
                GeeksForGeeks  
            </h1>
        <h2>Right Align</h2>
      
        <div class="right">
            <p>
              Absolute positioned
              elements can overlap other
              elements.
          </p>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output :

  • text-align: center;We can align any text written in HTML at center. we can use this property in various kinds tags.
    Example-3:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            .center {
                text-align: center;
                border: 3px solid green;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color:green;
                   text-align: center;">  
                GeeksForGeeks  
            </h1>
        <h2>BOTH TEXTS ARE AT CENTER</h2>
      
        <div class="center">
            <p>This text is centered.</p>
        </div>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output :

  • padding: To vertically align items we can use padding.
    Example-4:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            .center {
                padding: 70px 0;
                border: 3px solid green;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color:green;
                   text-align:center;">  
                GeeksForGeeks  
            </h1>
        <h2>Center Vertically</h2>
      
        <div class="center">
            <p>This is vertically centered.</p>
        </div>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output :

  • padding & text-align; To align the text both vertically and horizontally using a combination of padding and text-align: center.
    Example-5:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            .center {
                padding: 70px 0;
                border: 3px solid green;
                text-align: center;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color:green;">  
              GeeksForGeeks  
            </h1>
        <p>Here we use padding and text-align
          to center the div element vertically
          and horizontally:</p>
      
        <div class="center">
            <p>This text is vertically
              and horizontally centered.</p>
        </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 :

1


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