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.

  1. 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
  2. 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

    3. 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