W3.CSS Text
การจัดตำแหน่งข้อความ
คลาส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">The w3-wide class specifies a wider text.</p>
ความทึบของข้อความ
คลาสw3-opacityออกแบบมาเพื่อทำงานกับทุกสี:
ความทึบของข้อความ
ความทึบของข้อความ
ความทึบของข้อความ
ความทึบของข้อความ
ตัวอย่าง
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
ข้อความเงา
คุณสมบัติ text-shadow CSS3 สามารถใช้เพื่อเพิ่มเอฟเฟกต์เงาหรือเบลอให้กับข้อความ:
ข้อความเงา
ข้อความเงา
ข้อความเงา
ข้อความเงา
ตัวอย่าง
<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>
Text Shadow ไม่ทำงานใน IE 9 และรุ่นก่อนหน้า