เพื่อจัดตำแหน่งข้อความด้วย CSS ให้ใช้คุณสมบัติ text-align ค่าที่เป็นไปได้มีดังนี้:
text-align: left | right | center | justify | initial | inherit;
ตัวอย่างที่ 1: text-align: justify พร้อม columns
<!DOCTYPE html> <html> <head> <style> .demo { -webkit-columns: auto auto; -moz-columns: auto auto; columns: auto auto; text-align: justify; } </style> </head> <body> <h1>Machine Learning</h1> <div class="demo"> Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing... </div> </body> </html>
ผลลัพธ์
ตัวอย่างที่ 2: text-align: center พร้อม gradient background
<!DOCTYPE html> <html> <head> <style> body { background-image: linear-gradient(to right, yellow,orange,yellow,green,blue,indigo,violet); } .demo { text-decoration: overline; text-decoration-color: yellow; font-variant: normal; text-align: center; } </style> </head> <body> <h1>Examination Details</h1> <p class="demo">Exam on 20th December.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>
ผลลัพธ์
คำอธิบายค่า
- left - จัดชิดซ้าย (ค่าเริ่มต้นสำหรับ LTR)
- right - จัดชิดขวา (ค่าเริ่มต้นสำหรับ RTL)
- center - จัดกึ่งกลาง
- justify - จัดกว้างเต็ม (ขยายช่องว่างระหว่างคำ/ตัวอักษร)
- start - จัดตามทิศทางการอ่าน (LTR=left, RTL=right)
- end - จัดตรงข้ามทิศทางการอ่าน
- match-parent - ใช้ค่าเดียวกับพ่อ
คำแนะนำ
- ใช้
text-align: justifyร่วมกับtext-justify: inter-characterสำหรับภาษาไทย - ใช้
text-align: centerสำหรับหัวข้อ, ปุ่ม, ตัวเลข - หลีกเลี่ยง justify สำหรับคอลัมน์แคบ (ช่องว่างจะใหญ่เกินไป)
