Open In App

CSS Align

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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


Last Updated : 19 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads