Css Text Align

CSS text align

Created By: chatGPT

In CSS, the text-align property is used to set the horizontal alignment of text within its container. It can take several values, such as left, right, center, and justify. Understanding how to use this property effectively can greatly enhance the presentation of your text content.

p {
    text-align: center;
}

When you set text-align: left;, the text will align itself to the left edge of the containing element. This is typically the default behavior in most block-level elements.

h1 {
    text-align: left;
}

Using text-align: right; will align your text to the right edge, which can be useful for certain design layouts or when the text is required to appear on the right side.

article {
    text-align: right;
}

text-align: center; centers the text within its container. This is ideal for headings or when you want to draw attention to a specific piece of content.

div {
    text-align: center;
}

The text-align: justify; distributes the text evenly across the width of the container, making both the left and right edges aligned. This can create a formal appearance, especially in documents and articles.

p {
    text-align: justify;
}

Here's an example demonstrating multiple alignments in a single CSS file where different text elements have varying alignments.

h2 {
    text-align: center;
}

p.left {
    text-align: left;
}

p.right {
    text-align: right;
}

p.justified {
    text-align: justify;
}