W3.CSS Text
Text Alignment
The w3-left-align and the w3-right-align classes are used to align text.
Left aligned text.
Right aligned text.
Example
<div class="w3-container w3-border w3-large">
<div
class="w3-left-align"><p>Left aligned text.</p></div>
<div
class="w3-right-align"><p>Right aligned text.</p></div>
</div>
Try It Yourself »
Centering Elements
The w3-center class is used to center-align elements:
Centered Content
Some centered text.
Example
<div class="w3-container w3-center">
<h2>Centered Content</h2>
<img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">
<p>Some centered text.</p>
</div>
Try It Yourself »
Wide Text
The w3-wide class specifies a wider text:
This text is normal.
This text is wider.
Text Opacity
The w3-opacity class is designed to work with all colors:
Text Opacity
Text Opacity
Text Opacity
Text Opacity
Example
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Try It Yourself »
Text Shadow
The CSS3 text-shadow property can be used to add shadow or blur effects to text:
Text Shadow
Text Shadow
Text Shadow
Text Shadow
Special Effects
Text Opacity + Bold
Yellow Text + Shadow + Bold
Orange Text + Shadow + Bold
Example
<div class="w3-panel w3-pink">
<h1 class="w3-opacity">
<b>Text Opacity + Bold</b></h1>
</div>
<div class="w3-panel w3-amber">
<h1 class="w3-text-yellow"
style="text-shadow:1px 1px 0 #444">
<b>Yellow Text + Shadow + Bold</b></h1>
</div>
<div class="w3-panel w3-blue">
<h1 class="w3-text-orange"
style="text-shadow:1px 1px 0 #444">
<b>Orange Text + Shadow + Bold</b></h1>
</div>
Try It Yourself »
Text Shadow does not work in IE 9 and earlier.
