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:
The values are:<div style="text-align: left;">
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:
The values are:style="vertical-align: text-bottom;
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:
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS (this article)
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3