How to Align Text with CSS
Aligning text in CSS can be achieved using the
text-align property or the vertical-align property.- The
text-alignproperty is used to specify how inline content should be aligned within a block. For example:
The values are:<div style="text-align: left;">leftrightcenterjustify
- The
vertical-alignproperty 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;bottommiddletoptext-bottombaselinetext-topsubsuper
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:
 |
| css vertical align text |
0 Comments: