W3.CSS 文本
文本对齐
w3-left-align 和 w3-right-align 类用于对齐文本。
左对齐文本。
右对齐文本。
示例
<div class="w3-container w3-border w3-large">
<div class="w3-left-align"><p>左对齐文本。</p></div>
<div class="w3-right-align"><p>右对齐文本。</p></div>
</div>
自己尝试 »
居中元素
w3-center 类用于居中对齐元素。
居中内容
一些居中文本。
示例
<div class="w3-container w3-center">
<h2>居中内容</h2>
<img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">
<p>一些居中文本。</p>
</div>
自己尝试 »
宽文本
w3-wide 类指定更宽的文本。
此文本是正常的。
此文本更宽。
文本透明度
w3-opacity 类旨在与所有颜色配合使用。
文本透明度
文本透明度
文本透明度
文本透明度
文本阴影
CSS3 text-shadow 属性可用于为文本添加阴影或模糊效果。
文本阴影
文本阴影
文本阴影
文本阴影
特殊效果
文本透明度 + 粗体
黄色文本 + 阴影 + 粗体
橙色文本 + 阴影 + 粗体
示例
<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 及更早版本中不起作用。
