How to Align Text with CSS

  • google plus

In Brief...

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

Take our Introduction to CSS Training course for free.

See the Course Outline and Register

Instructions

  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

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss