clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

More

CSS Text Alignment

Imperial Advance Hero Image

CSS Text Alignment

It is use to set the horizontal alignment of the text that means it is use to display text in left, right ,center or cover full line.

 

Syntax -

text-align:value;

 

values

Left

It is use to display texts in left side.(default) 

Right It is use to display texts in right side.
center It is use to display text in center. 
justify
It is use to display text in full line.

 

For example -

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Aligment</title>

    <style>
        h6 {
            text-align: left;
        }

        h5 {
            text-align: right;
        }

        h4 {
            text-align: center;
        }

        p {
            text-align: justify;
        }
    </style>

</head>

<body>
    <h6> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aspernatur dolor qui, tempore quos facilis. Placeat ut pariatur minus, rem reprehenderit tempora magnam veritatis perspiciatis!</h6>
    <br><br>
    <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aspernatur dolor qui, tempore quos facilis. Placeat ut pariatur minus, rem reprehenderit tempora magnam veritatis perspiciatis!</h5>
    <br><br>
    <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aspernatur dolor qui, tempore quos facilis. Placeat ut pariatur minus, rem reprehenderit tempora magnam veritatis perspiciatis!</h4>
    <br><br>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aspernatur dolor qui, tempore quos facilis. Placeat ut pariatur minus, rem reprehenderit tempora magnam veritatis perspiciatis!</p>
</body>

</html>

 

Output

text aligment

CSS