---

文本对齐

w3-left-align 和 w3-right-align 类用于对齐文本。

左对齐文本。

右对齐文本。

实例

<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> 亲自试一试 »

---

居中元素

w3-center 类用于居中对齐元素:

内容居中

一些居中的文本。

实例

<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> 亲自试一试 »

---

宽文本

w3-wide 类指定更宽的文本:

这段文字是正常的。

这个文本更宽。

实例

<p class="w3-wide">w3-wide 类指定更宽的文本。</p> 亲自试一试 »

---

文本不透明度

w3-opacity 类旨在处理所有颜色:

文字不透明度

文字不透明度

文字不透明度

文字不透明度

实例

<div class="w3-panel w3-pink">
  <h2 class="w3-opacity">文字不透明度</h2>
</div> 亲自试一试 »

---

文字阴影

CSS3 text-shadow 属性可用于为文本添加阴影或模糊效果:

文字阴影

文字阴影

文字阴影

文字阴影

实例

<h2 class="w3-blue" style="text-shadow:1px 1px 0 #444">文字阴影</h2> 亲自试一试 »

---

特殊效果

文本不透明度 + 粗体

黄色文字 + 阴影 + 粗体

橙色文字 + 阴影 + 粗体

实例

<div class="w3-panel w3-pink">
  <h1 class="w3-opacity">
  <b>文本不透明度 + 粗体</b></h1>
</div>

<div class="w3-panel w3-amber">
  <h1 class="w3-text-yellow" style="text-shadow:1px 1px 0 #444">
  <b>黄色文字 + 阴影 + 粗体</b></h1>
</div>

<div class="w3-panel w3-blue">
  <h1 class="w3-text-orange" style="text-shadow:1px 1px 0 #444">
  <b>橙色文字 + 阴影 + 粗体</b></h1>
</div> 亲自试一试 »

文本阴影在 IE 9 及更早版本中不起作用。