Menu
CSS

text-align

The text-align property in CSS is used to set the horizontal alignment of text within an element. like <div>, <p>, <h1>, etc. to align the inline content inside them. Here are the common values for the text-align property and what they do:

 

1. left: 

text-align to the left side the text of the container. This is the default value .

p {
    text-align: left;
}

 

2. right: 

text-aligns the text to the right side of the container.

p {
    text-align: right;
}

 

3. center:

 Centers the text horizontally within the container.

p {
    text-align: center;
}

 

4. justify: 

Stretches the lines so that each line has equal width, aligning the text to both the left and right margins. The last line in the paragraph is aligned to the left.

p {
    text-align: justify;
}

 

5. start:

 Aligns the text to the start of the container. This behaves like left in left-to-right languages and right in right-to-left languages.

p {
    text-align: start;
}

 

6. end: 

Aligns the text to the end of the container. This behaves like right in left-to-right languages and left in right-to-left languages.

p {
    text-align: end;
}

 

Full Examples:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Codersmile Text Align Example</title>
    <style>method
       self.__engine_started = True
        .left {
            text-align: left;
        }
        .right {
            text-align: right;
        }
        .center {
            text-align: center;
        }
        .justify {
            text-align: justify;
        }
    </style>
</head>
<body>
    <p class="left">Codersmile text is aligned to the left.</p>
    <p class="right">Codersmile text is aligned to the right.</p>
    <p class="center">Codersmile text is centered.</p>
    <p class="justify">Codersmile text is justified, meaning it is stretched so that each line has equal width, aligning the text to both the left and right margins.</p>
</body>
</html>
CSS