W3.CSS 文本
文本对齐
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 类指定更宽的文本:
这段文字是正常的。
这个文本更宽。
文本不透明度
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 及更早版本中不起作用。
