Align - HTML Tutorial
By default, most HTML paragraphs (like this one) do not have an initial indentation, and text is left-aligned. You can use margin or padding to shift an entire paragraph, but what if you want to indent just the first line, or align text differently within a container?
As we saw in the Borders section, the box model controls the space around content. Here, we’ll focus on adjusting text inside the box.
Indenting Text
To indent the first line of a paragraph, use the text-indent property. For example, the following CSS adds a 2em indent to all paragraphs:
<head>
<style>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>
"On the contrary," said Holmes, quietly, "I have every reason to believe that I will succeed in discovering Mr. Hosmer Angel."
</p>
<p>
Mr. Windibank gave a violent start, and dropped his gloves. "I am delighted to hear it," he said.
</p>
</body>You can also use negative values with text-indent to create hanging indents, often used for headings, quotes, or bibliographies. Make sure the container has appropriate padding to avoid text overlapping the edges.
<head>
<style>
div {
padding: 5px 5px 5px 30px;
border: 3px solid;
}
h2 {
text-indent: -25px;
}
</style>
</head>
<body>
<div>
<h2>The Red-Headed League</h2>
<p>
I had called upon my friend, Mr. Sherlock Holmes, one day in the autumn of last year, and found him in deep conversation with a very stout, florid-faced elderly gentleman with fiery red hair.
</p>
</div>
</body>In this example, the container div has 5px padding on all sides except the left, which is 30px. The h2 has a negative text-indent of 25px, creating a 25px hanging indent while keeping all other elements aligned with the container’s padding.
Horizontal Alignment
The text-align property controls the horizontal alignment of text and inline content within a container. Common values are:
left: Aligns text to the left edge (default)center: Centers text within the containerright: Aligns text to the right edgejustify: Stretches text so that both left and right edges align (may cause uneven word spacing)
Example of all four options:
<head>
<style>
div { border: 3px solid; padding: 5px; }
div.left { text-align: left; background: #ffcccc; }
div.center { text-align: center; background: #ccffcc; }
div.right { text-align: right; background: #ccccff; }
div.justify { text-align: justify; background: #ffffcc; }
</style>
</head>
<body>
<div class="left"><em>Left-aligned text.</em></div>
<div class="center"><em>Centered text.</em></div>
<div class="right"><em>Right-aligned text.</em></div>
<div class="justify"><em>Justified text.</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</body>Remember, text-align affects text and inline content inside a block. To center a block element itself, you would use CSS positioning or margin techniques, which are covered in more advanced sections.