CSS Layout - Horizontal & Vertical Align

    In this CSS tutorial, we will be going through all the tricks you can use to align an element without using a dedicated align property and we will also be covering how horizontal and vertical alignment can be performed using various CSS properties.

    Align a Text in Center

    In CSS we have text-align property, which can set the alignment of the element text. It accepts values like, center, right and left. Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
             .mid {
                text-align: center;
                border: 3px solid red;
                  }
           </style>
         </head>
         <body>
             <div class="mid">
                <p>This Paragrpah is in center.</p>
             </div>
        </body>
    </html>

    Preview

    This Paragrpah is in center.

    Align an Image in Center

    Unfortunately, we do not have a dedicated property to align an image to the center, but using some other properties we can make this happen.  To align an image in center we have to set margin - right and margin-left properties to auto and make the display element block . Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                img {
                 display: block;
                 margin-left: auto;
                 margin-right: auto;
                     }
           </style>
        </head>
        <body>
             <img src="https://secureservercdn.net/160.153.137.163/84g.4be
                       .myftpupload.com/wp-content/uploads/2019/03/Techgeekbuzz.png"
             alt="Techgeekbuzz Logo" style="width:40%">
        </body>
    
    </html> 

    Align an Element left or right using position Property With position property and absolute value, we can either align an element left or right. Example (right alignment)

    <!DOCTYPE html>
    <html>
        <head>
          <style>
            .right {
            position: absolute;
            right: 0px;
            width: 50%;
            border: 3px solid red;
             padding: 10px;
           }
          </style>
        </head>
        <body>
          <div class="right">
            <p>This Paragraph is aligned right.</p>
          </div>
        </body>
    </html>

    Preview

    This Paragraph is aligned right.

    Example (left alignment)

    <!DOCTYPE html>
    <html>
        <head>
          <style>
            .left {
                 position: absolute;
                 left: 0px;
                 width: 50%;
                 border: 3px solid red;
                 padding: 10px;
                 }
         </style>
       </head>
       <body>
          <div class="left">
           <p>This Paragraph is aligned left.</p>
         </div>
       </body>
    </html>

    Preview

    This Paragraph is aligned left.

    Align an Element left or right using float Property

    float property accepts values like left and right which can be used for the element content alignment. But if the element which is aligned using float property does not fit in its parent element box then it can overflow outside. Example (right alignment)

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .right {
                   float: right;
                   width: 50%px;
                   border: 3px solid red;  
                  padding: 10px;
                    }
            </style>
        </head>
        <body>
            <div class="right">
               <p>This Paragraph is aligned right.</p>
            </div>
        </body>
    </html>

    Preview

    This Paragraph is aligned right.

    Example (left alignment)

    <!DOCTYPE html>
    <html>
        <head>
           <style>
            .left {
             float: left;
             width: 50%px;
             border: 3px solid red;
             padding: 10px;
                 }
         </style>
      </head>
      <body>
         <div class="left">
            <p>This Paragraph is aligned left.</p>
         </div>
        </body>
    </html>

    Preview

    This Paragraph is aligned left.

    Use padding for Center Vertically

    To center an element content vertically we can use the padding property with specified top and right values. Example

    <!DOCTYPE html>
        <html>
           <head>
             <style>
             .ver_cen {
                padding: 50% 0;
               border: 3px solid red;
                  }
            </style>
          </head>
          <body>
              <div class="ver_cen">
                 <p>This paragraph is vertically centered.</p>
              </div>
          </body>
    </html>

    Preview

    This paragraph is vertically centered.

    Center a text using padding property

    To align a text in the mid-center we can use the text-align:center with the padding property. Example

    <!DOCTYPE html>
        <html>
            <head>
              <style>
                .cen {
                   padding: 50% 0;
                   border: 3px solid red;
                   text-align: center;
                     }
             </style>
           </head>
           <body>
                 <div class="cen">
                    <p> This paragraph is center aligned.</p>
                 </div>
          </body>
    </html>

    Preview

    This paragraph is center aligned.

    Center Alignment using line-height property

    The text content of an element can be aligned centre using the line-height property. The trick is, set the values for line-height and hight same. Example

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          .mid {
             line-height: 300px;
             height: 300px;
             border: 3px solid red;
             text-align: center;
               }
          .mid p {
             line-height: 1.5;
             display: inline-block;
             vertical-align: middle;
               }
        </style>
      </head>
      <body>
         <div class="mid">
           <p>This paragraph is center aligned.</p>
         </div>
      </body>
    </html>

    Preview

    This paragraph is center aligned.

    Center Alignment using the transform property

    If you are not satisfied with the line-hight and padding properties center alignment trick, then you can also use the transform property to align a text in mid center. Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .mid {
                  height: 100px;
                  position: relative;
                  border: 3px solid red;
                }
    
                .mid p {
                  margin: 0;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
                }
            </style>
        </head>
        <body>
        <div class="mid">
          <p>This paragraph is center aligned.</p>
        </div>
        </body>
    </html>

    Preview

    This paragraph is center aligned.

    Summary

    In this CSS Layout tutorial, you learned how can you use different CSS properties to align an HTML element within a web-page. You might also face such questions during your CSS interview, where the interview may ask you to code different techniques to align an element. People are also reading: