Skip to content
Related Articles

Related Articles

CSS | Align
  • Difficulty Level : Easy
  • Last Updated : 12 Apr, 2019

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:




    <!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>

    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:






    <!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>

    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:




    <!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>

    Output :

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




    <!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>

    Output :

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




    <!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>

    Output :

My Personal Notes arrow_drop_up
Recommended Articles
Page :