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 Minnick, the co-founder of WatzThis?, has overseen the development of hundreds of web and mobile projects for customers from small businesses to some of the world’s largest companies. A prolific writer, Chris has authored and co-authored books and articles on a wide range of Internet-related topics including HTML, CSS, mobile apps, e-commerce, e-business, Web design, XML, and application servers. His published books include Adventures in Coding, JavaScript For Kids For Dummies, Writing Computer Code, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW E-Commerce Designer Certification Bible, and 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.