W3.CSS 文本

文本对齐

这个w3-左对齐和w3-右对齐类用于对齐文本。

左对齐文本。

右对齐文本。

示例

<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-中心类用于居中对齐元素：

内容居中

一些居中的文本。

示例

<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 宽class 指定更宽的文本：

这段文字很正常。

这段文字比较宽。

示例

<p class="w3-wide">The w3-wide class specifies a wider text.</p>

亲自试一试»

文本不透明度

这个w3-不透明度类被设计为适用于所有颜色：

文本不透明度

示例

<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>

亲自试一试»

文字阴影

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

文字阴影

示例

<h2 class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>

亲自试一试»

特殊效果

文本不透明度+粗体

黄色文字+阴影+粗体

橙色文字+阴影+粗体

示例

<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>

亲自试一试»

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