วิธีจัดกึ่งกลางข้อความใน HTML
หนึ่งในสิ่งแรกที่เรียนรู้เป็นโปรแกรมเมอร์คือการจัดตำแหน่งบล็อกข้อความ บทความนี้ดูวิธีจัดข้อความกึ่งกลางของ container โดยใช้ style และ align attributes
Style Attributes
เมื่อทำงานกับ div ใน HTML ใช้ style attribute สำหรับ inline-styling ใช้ CSS property text-align จัดกึ่งกลางข้อความใน <div>:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center with Style Attribute</title> </head> <body> <div class="container" style="text-align:center;"> <p>Text to center</p> </div> </body> </html>
Align Attributes
ใช้ align attributes เมื่อทำงานกับตารางใน HTML ทำงานได้กับ <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr> elements:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Center with Align Attribute</title> </head> <body> <table border=1 width="800" align="center"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr align="center"> <td>January</td> <td>$100</td> </tr> <tr align="center"> <td>February</td> <td>$80</td> </tr> </table> </body> </html>
สำคัญ: การจัดตำแหน่งขึ้นอยู่กับ container ที่ข้อความอยู่ หาก container กว้างแค่ครึ่งหน้า ข้อความจะจัดกึ่งกลางใน container ไม่ใช่ทั้งหน้า
แค่นี้ก็พอ! คุณรู้จักจัดกึ่งกลางข้อความข้าม <div> และ <table> elements แล้ว
