CSS Align

How to align text in CSS?

In CSS, you can use various properties to control the alignment of elements on a web page.
These properties are essential for creating visually appealing and well-structured layouts.

Syntax:

text-align: justify | center | left | right | initial |inherit;

CSS properties for alignment:

Text Alignment:

text-align: This property is used to control the horizontal alignment of text content within an element. Values include left, right, center, and justify.

p {
text-align: center;
}

Vertical Alignment:

vertical-align: This property is mainly used for inline or inline-block elements to control their vertical alignment within their containing element.
Values include top, middle, bottom, etc..

img {
vertical-align: middle;
}

Centering Horizontally and Vertically:

To center an element both horizontally and vertically within its parent container, you can use a combination of display: flex on the parent and align-items: center; justify-content: center; properties.

.container {
 display: flex;
 align-items: center;
 justify-content: center;
}

Example:

<!DOCTYPE html>
<html>

<head>
    <title>text-align property</title>
    <style>
        h2,
        h4 {
            text-align: center;
        }

        .main {
            border: 1px solid black;
            margin: 10px;
            font-size: 14px;

        }

        #justify {
            text-align: justify;
        }

        #left {
            text-align: left;
        }

        #right {
            text-align: right;
        }

        #center {
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>text-align property</h2>
    <div class="main">
        <h4>text-align: justify;</h4>
        <div id="justify">
            Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science
            related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various
            technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        </div>
    </div>
    <div class="main">
        <h4>text-align: left;</h4>
        <div id="left">
            Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science
            related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various
            technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        </div>
    </div>
    <div class="main">
        <h4>text-align: right;</h4>
        <div id="right">
            Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science
            related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various
            technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        </div>
    </div>
    <div class="main">
        <h4>text-align: center;</h4>
        <div id="center">
            Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science
            related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various
            technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        </div>
    </div>
</body>

</html>

Output: