แม่แบบ CSS: text-align: center;
📝 การใช้งาน
แม่แบบนี้ใช้เมื่อคุณต้องการจัดข้อความหรือหัวข้อให้อยู่กึ่งกลางแนวนอน เหมาะสำหรับการจัดวางหัวเรื่อง ปุ่ม หรือข้อความแนะนำให้อยู่ตรงกลางของหน้า
📘 คำอธิบาย
คุณสมบัติ text-align เมื่อกำหนดค่าเป็น center จะจัดข้อความให้อยู่ตรงกลางภายในองค์ประกอบแม่ ในตัวอย่างนี้ใช้คลาส .text-center เพื่อให้ใช้งานได้ง่าย
✅ ตัวอย่าง
นี่คือตัวอย่างข้อความที่อยู่ตรงกลาง
📄 โค้ด (บางส่วน)
<style>
.text-center {
text-align: center;
}
</style>
📦 โค้ด (HTML เต็มรูปแบบ)
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>ตัวอย่างการจัดข้อความตรงกลาง</title>
<style>
.text-center {
text-align: center;
}
</style>
</head>
<body>
<p class="text-center">นี่คือตัวอย่างข้อความที่อยู่ตรงกลาง</p>
</body>
</html>
🧩 การประยุกต์ใช้และวิธีใช้งาน
text-align: center; เป็นคุณสมบัติ CSS ที่เรียบง่ายแต่มีความยืดหยุ่นสูง สามารถใช้ได้ไม่เพียงแค่การจัดกึ่งกลางข้อความเท่านั้น แต่ยังใช้ในหลายสถานการณ์ได้หลากหลาย
📌 จัดกึ่งกลางหลายองค์ประกอบพร้อมกัน
เมื่อใช้ .text-center กับองค์ประกอบแม่ จะทำให้องค์ประกอบที่เป็น inline ทั้งหมดและข้อความภายในจัดกึ่งกลางพร้อมกัน เช่น แท็ก <p> <span> และ <a> ที่อยู่ใน <div class="text-center"> จะถูกจัดให้อยู่ตรงกลางทั้งหมด
🎯 การจัดตำแหน่งปุ่มและเมนูนำทาง
ถ้าต้องการจัดเมนูนำทางหรือกลุ่มปุ่มให้อยู่ตรงกลาง การใช้ text-align: center; กับคอนเทนเนอร์นั้นจะได้ผลดี หมายเหตุว่าคุณสมบัตินี้จะมีผลกับปุ่มที่เป็น inline หรือ inline-block (เช่น <button> หรือ <a> ที่กำหนด display: inline-block;) ซึ่งจะถูกควบคุมโดยการจัดข้อความขององค์ประกอบแม่
⚠️ ข้อควรระวัง
คุณสมบัตินี้มีผลกับ องค์ประกอบแบบ inline และ ข้อความ เท่านั้น แต่จะไม่ทำให้องค์ประกอบบล็อกเคลื่อนที่ไปตรงกลาง หากต้องการจัดกึ่งกลางองค์ประกอบบล็อกต้องใช้ร่วมกับ margin: 0 auto;
นอกจากนี้ ในการออกแบบตอบสนอง (responsive design) การจัดกึ่งกลางจะเหมาะกับหน้าจอที่กว้าง แต่ในหน้าจอแคบ เช่น มือถือ การจัดชิดซ้ายอาจช่วยให้อ่านง่ายกว่า การใช้ media queries เพื่อปรับเปลี่ยนการจัดตำแหน่งตามขนาดหน้าจอจึงเป็นวิธีที่ดี