บทช่วยสอน CSS นี้ครอบคลุมวิธีจัดกึ่งกลางข้อความและ block elements ทั้งแนวนอนและแนวดิ่ง
1. จัดกึ่งกลางข้อความ (Text Elements)
ใช้ text-align: center; บนคอนเทนเนอร์ใหญ่:
.div-class { text-align: center; background-color: lightblue; }
2. จัดกึ่งกลาง Block Elements
ควบคุมความกว้างคอนเทนเนอร์ แล้วตั้ง margin: auto:
body { width: 800px; margin: auto; }
3. จัดกึ่งกลางรูปภาพ
ตั้ง display: block ควบคุม width แล้ว margin: auto:
img { display: block; margin: 20px auto; width: 50%; }
4. จัดกึ่งกลางแนวตั้งและแนวนอนใน Div
วิธีที่ 1: Padding
ปรับ padding ใน div แล้ว text-align: center จัดแนวนอน
วิธีที่ 2: Line-height
ตั้ง line-height เท่าความสูง block element ร่วมกับ text-align: center หลายบรรทัด: เพิ่ม vertical-align: middle และ display: inline-block บน child
วิธีที่ 3: Transform
Parent position: relative Child position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
วิธีที่ 4: Flexbox (แนะนำ)
Parent display: flex; align-items: center; justify-content: center
สรุป
วิธีจัดกึ่งกลางที่พบบ่อย: text-align (ข้อความ), margin auto (block), display block + margin auto (รูปภาพ), padding/line-height/transform/flexbox (แนวตั้งใน div) — Flexbox เป็นวิธีทันสมัยและยืดหยุ่นที่สุด
