CSS text-align
BLUF: Styling is what brings the web to life, and mastering CSS text-align is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: CSS text-align
CSS is all about presentation. Discover how CSS text-align works to transform plain HTML into a premium user experience in the guide below.
This CSS attribute is employed to define the horizontal alignment of either a table-cell container or a block element. It functions akin to the vertical-align attribute, but focuses on horizontal positioning.
Syntax
Example
text-align: justify | center | right | left | initial | inherit;
Possible values
It is commonly employed in print media such as newspapers and magazines. This feature expands the content of the element to ensure uniform line widths throughout the layout.
center: It centers the inline text.
right: It is used to align the text to the right.
left: It is used to align the text to the left.
Let's explore an example that will showcase the functionality of the text-align property.
Example
Example
<html>
<head>
</head>
<style>
h2{
color: blue;
}
</style>
<body>
<h1>Example of text-align proeprty</h1>
<h2 style = "text-align: center;">
text-align: center;
</h2>
<h2 style = "text-align: right;">
text-align: right;
</h2>
<h2 style = "text-align: left;">
text-align: left;
</h2>
<h2 style = "text-align: justify;">
text-align: justify; To see its effect, it should be applied on large paragraph.
</h2>
</body>
</html>
