CSS Align

The align in CSS is used for positioning the items along with setting the distribution of space between and around content items. We can align the items either horizontally or vertically. The various methods and techniques are used to center them, by taking care of the left and the right margin, etc. The various method for aligning & its usage are discussed below:

margin:auto: This property is used to align a block element into the center.

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

Example1: This example describes the CSS align using the margin: auto property.

HTML

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

Output:

position: absolute; We can align the items using this property. (static, relative, fixed, absolute, sticky).

Example 2: This example describes the CSS align using the position: absolute; property.

Note: The position properties top, bottom, left, and right will not work unless the position property is set first.

HTML

<!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 the center. we can use this property in various kinds of tags.

Example 3: This example describes the CSS align using the text-align: center; property.

HTML

<!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: This example describes the CSS align using the padding property.

HTML

<!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: This example describes the CSS align using the padding & text-align properties.

HTML

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

Supported Browser:

Google Chrome 95.0
Microsoft Edge 95.0
Firefox 93.0
Opera 80.0
Safari 15.0

Article Tags :

CSS

Web Technologies

CSS-Basics