6.1 The text-align Property
Text alignment is basically one of the most important aspects of styling web pages, as it lets you control how text is positioned within containers. CSS gives us two main properties for text alignment: text-align and vertical-align. These properties let you manage horizontal and vertical alignment of text respectively.
The text-align property manages the horizontal alignment of text inside a block element. It decides how text is aligned concerning the element's borders.
Values
left: aligns text to the left (default for left-to-right text)right: aligns text to the right (default for right-to-left text)center: center aligns textjustify: aligns text to both the left and right edges, adding spaces between words to spread text evenly across the full width of the containerstart: aligns text to the start (left or right edge based on text direction)end: aligns text to the end (right or left edge based on text direction)
Usage Example:
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
<body>
<p class="left">This text is aligned to the left.</p>
<p class="right">This text is aligned to the right.</p>
<p class="center">This text is centered.</p>
<p class="justify">This text is justified. It will stretch so the text occupies the full width of the container.</p>
</body>
6.2 The vertical-align Property
The vertical-align property manages the vertical alignment of an element relative to the baseline of its parent. It's mostly used for aligning inline elements, like images, lines of text, or tables, vertically within a line of text or another container.
Values:
baseline: aligns to the parent's baseline (default value)sub: aligns as a subscriptsuper: aligns as a superscripttext-top: aligns to the top of the parent's fonttext-bottom: aligns to the bottom of the parent's fontmiddle: aligns to the middle of the parenttop: aligns to the top of the containerbottom: aligns to the bottom of the container- Percentage value: offsets the element by the specified percentage relative to the line-height
Usage Example:
.container {
height: 100px;
border: 1px solid #000;
}
.baseline {
vertical-align: baseline;
}
.sub {
vertical-align: sub;
}
.super {
vertical-align: super;
}
.text-top {
vertical-align: text-top;
}
.text-bottom {
vertical-align: text-bottom;
}
.middle {
vertical-align: middle;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
.percent-50 {
vertical-align: 50%;
}
<body>
<div class="container">
<span class="baseline">baseline</span>
<span class="sub">sub</span>
<span class="super">super</span>
<span class="text-top">text-top</span>
<span class="text-bottom">text-bottom</span>
<span class="middle">middle</span>
<span class="top">top</span>
<span class="bottom">bottom</span>
<span class="percent-50">50%</span>
</div>
</body>
GO TO FULL VERSION