How to Align Text with CSS

See CSS: Tips and Tricks for similar articles.

Aligning text in CSS can be achieved using the text-align property or the vertical-align property.

The text-align property is used to specify how inline content should be aligned within a block. For example:
```
<div style="text-align: left;">
```
The values are:
- left
- right
- center
- justify
The vertical-align property is used to indicate how inline content should be aligned vertically relative to sibling inline content. For example:
```
style="vertical-align: text-bottom;
```
The values are:
- bottom
- middle
- top
- text-bottom
- baseline
- text-top
- sub
- super

The following code sample shows these properties in use:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Align Text</title>
</head>
<body>
<h1>Align Text</h1>
<h2>Text-Align</h2>
<div style="text-align: left;">text-align:left</div>
<div style="text-align: center;">text-align:center</div>
<div style="text-align: right;">text-align:right</div>
<div style="text-align: justify;">
	text-align:justify - to see the effect of justify, 
		the text block has to wrap
	text-align:justify - to see the effect of justify, 
		the text block has to wrap
	text-align:justify - to see the effect of justify, 
		the text block has to wrap
</div>
<h2>Vertical Align</h2>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
		<img src="Images/block.gif" width="100" height="100" 
			alt="block" style="vertical-align: bottom;">
			vertical-align: bottom
</div>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
<img src="Images/block.gif" width="100" height="100" 
			alt="block" style="vertical-align: middle;">
			vertical-align: middle
</div>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	<img src="Images/block.gif" width="100" height="100" 
			alt="block" style="vertical-align: top;">
			vertical-align: top
</div>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	<img src="Images/block.gif" width="100" height="100" 
			alt="block" style="vertical-align: text-bottom;">
			vertical-align: text-bottom
</div>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	<img src="Images/block.gif" width="100" height="100" 
			alt="block" style="vertical-align: baseline;">
			vertical-align: baseline
</div>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	<img src="Images/block.gif" width="100" height="100" 
			alt="block" style="vertical-align: text-top;">
			vertical-align: text-top
</div>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	vertical-align: <span style="vertical-align: sub; color: blue;">sub</span>
</div>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
			vertical-align: <span style="vertical-align: super; color: blue;">super</span>
</div>
</body>
</html>

The above code will render the following: Align Text

How to Align Text with CSS

Related Articles