Arrow

CSS Text Alignment

AuthorHariom Prajapati

Pubish Date28 Aug 2022

categoryCSS

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