• google plus

How to Align Text with CSS

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

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.
About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.