Layout Basics

หัวข้อนี้คืออะไร

การจัดกึ่งกลาง (centering) คือการวาง element ให้อยู่ตรงกลางของพื้นที่ที่กำหนด คำถามที่ผู้เริ่มต้นมักถามคือ "ทำไมการจัดกึ่งกลางใน CSS ถึงมีหลายวิธี?" — คำตอบคือ: ขึ้นอยู่กับว่าคุณต้องการจัดกึ่งกลาง "อะไร" การจัดกึ่งกลางใน CSS แบ่งได้เป็นสองมิติ: - แนวนอน (horizontal) — จัดให้อยู่ตรงกลางซ้าย-ขวา - แนวตั้ง (vertical) — จัดให้อยู่ตรงกลางบน-ล่าง และสิ่งที่ต้องการจัดกึ่งกลางมีหลายประเภท:

• ข้อความ (text) — ใช้ text-align: center จัดข้อความภายใน element
• กล่อง block (block element) — ใช้ margin-inline: auto ร่วมกับการกำหนด width
• เนื้อหาในกล่อง — ใช้ Flexbox หรือ Grid จัด element ลูกให้อยู่กลาง
• กึ่งกลางทั้งแนวนอนและแนวตั้ง — ใช้ Flexbox กับ justify-content + align-items

ทำไมหัวข้อนี้จึงสำคัญ

การจัดกึ่งกลางเป็นงานที่เจอในทุก UI component แทบจะทุกวัน ไม่ว่าจะเป็น: - หัวข้อบทความที่อยู่ตรงกลาง - Card ที่อยู่กลางหน้า - ปุ่มที่อยู่กลาง container - ข้อความในกล่องสี่เหลี่ยม - Loading spinner ที่ลอยอยู่กลางหน้าจอ ถ้าเลือกวิธีไม่ตรงกับชนิดของ element ผลลัพธ์มักไม่เป็นไปตามที่คิด เช่น: - ใช้ text-align: center กับ block element แล้วกล่องไม่ขยับ - ใช้ margin: auto โดยไม่กำหนด width แล้วไม่มีอะไรเปลี่ยน - ใช้ margin: auto กับ inline element แล้วไม่ทำงาน การเข้าใจหลักการเลือกวิธีจัดกึ่งกลางจะช่วยให้แก้ปัญหาได้เร็วขึ้นมาก

ตัวอย่างจากชีวิตจริง

ลองนึกภาพโต๊ะทำงานและของที่วางบน: 📝 จัดข้อความให้อยู่กลาง — เหมือนพิมพ์ชื่อบนนามบัตร เวลาคุณพิมพ์ชื่อตรงกลางนามบัตร คุณจัด "ข้อความ" ให้อยู่กลาง ไม่ได้จัดนามบัตรทั้งแผ่น — นี่คือ text-align: center 📦 จัดกล่องให้อยู่กลางโต๊ะ — เหมือนวางกล่องของขวัญ เวลาวางกล่องของขวัญตรงกลางโต๊ะ คุณวางกล่องให้มีระยะห่างด้านซ้ายและขวาเท่ากัน — นี่คือ margin: auto 🎯 จัดทุกอย่างให้อยู่ตรงกลางกล่อง — เหมือนแขวนภาพตรงกลางกรอบ เวลาแขวนภาพในกรอบให้อยู่ตรงกลางทั้งแนวนอนและแนวตั้ง คุณต้องคิดถึงระยะห่างทั้งสี่ด้าน — นี่คือ Flexbox centering แต่ละสถานการณ์ใช้วิธีต่างกัน เพราะ "สิ่งที่จัดกลาง" ต่างกัน

แนวคิดหลักที่ต้องเข้าใจ

เลือกวิธีจัดกึ่งกลางตามชนิดของสิ่งที่ต้องการจัดกลาง

ก่อนเลือกวิธี ถามตัวเองสองคำถาม: คำถามที่ 1: จัดกึ่งกลาง "อะไร"? - ข้อความ (text/inline content) → ใช้ text-align: center บน parent - ตัวกล่อง block element เอง → ใช้ margin-inline: auto + กำหนด width - เนื้อหาภายใน container → ใช้ Flexbox (justify-content / align-items) คำถามที่ 2: จัดกึ่งกลาง "ในทิศไหน"? - แนวนอนอย่างเดียว → text-align หรือ margin auto - ทั้งแนวนอนและแนวตั้ง → Flexbox + justify-content: center + align-items: center ── กฎที่ต้องจำ ── • text-align: center → จัดข้อความและ inline element ภายใน parent ให้อยู่กลาง ไม่ได้จัดตัว parent เอง • margin-inline: auto → จัด block element ให้อยู่กลาง parent แนวนอน ต้องมี width กำหนดด้วย • display: flex + justify-content: center → จัด element ลูกทั้งหมดให้อยู่กลางแนวนอน • display: flex + align-items: center → จัด element ลูกให้อยู่กลางแนวตั้ง

การทำงานทีละขั้นตอน

วิธีคิดเมื่อต้องจัดกึ่งกลาง:

• ขั้นที่ 1 — ระบุว่า 'อะไร' ที่ต้องอยู่กลาง: ข้อความในกล่อง? ตัวกล่องในหน้า? เนื้อหาใน container? การตอบคำถามนี้ให้ชัดคือจุดเริ่มต้นที่สำคัญที่สุด
• ขั้นที่ 2 — ดูชนิดของ element: inline content (ข้อความ, icon) → text-align | block element (div, section) → margin auto | element ลูกใน container → Flexbox
• ขั้นที่ 3 — ดูทิศทางที่ต้องจัดกลาง: แนวนอนอย่างเดียว หรือต้องการทั้งแนวนอนและแนวตั้ง
• ขั้นที่ 4 — ใส่ property ที่ถูกต้องกับ element ที่ถูกต้อง: text-align ใส่ที่ parent, margin auto ใส่ที่ตัว element เอง, flex ใส่ที่ container
• ขั้นที่ 5 — ตรวจสอบเงื่อนไขที่จำเป็น: margin auto ต้องมี width, flex ต้องมี height ถ้าต้องการ vertical centering

ตัวอย่างโค้ด

ดูสามเทคนิคพื้นฐานที่ใช้บ่อยที่สุด:

/* ── วิธีที่ 1: จัดข้อความให้อยู่กลาง (text-align) ── */
.heading {
  text-align: center;   /* ข้อความใน .heading อยู่ตรงกลาง */
}
/* ใช้ได้กับ: text, inline element, inline-block element ภายใน parent */


/* ── วิธีที่ 2: จัด block element ให้อยู่กลางแนวนอน (margin auto) ── */
.card {
  width: 320px;         /* ต้องกำหนด width ก่อน */
  margin-inline: auto;  /* หรือ margin: 0 auto */
}
/* ใช้ได้กับ: block element ที่มี width กำหนดแล้ว */


/* ── วิธีที่ 3: จัดเนื้อหากลาง container ด้วย Flexbox ── */
.container {
  display: flex;
  justify-content: center;  /* กลางแนวนอน (horizontal) */
  align-items: center;      /* กลางแนวตั้ง (vertical) */
  height: 200px;            /* ต้องมี height ถ้าต้องการ vertical centering */
}
/* ใช้ได้กับ: element ลูกทุกชนิดใน container */

ทดลองเทคนิคการจัดกึ่งกลาง

จุดที่ผู้เริ่มต้นมักสับสน

ตรวจสอบว่าคุณเข้าใจถูกต้องหรือยัง:

• ❌ ใช้ text-align: center กับ block element แล้วคาดหวังว่ากล่องจะขยับไปกลาง — text-align จัดแค่ข้อความ/inline content ภายใน parent เท่านั้น ไม่ได้ขยับตัว block element ให้อยู่กลาง หากต้องการขยับกล่องให้ใช้ margin-inline: auto แทน
• ❌ ใช้ margin: auto กับ block element แต่ลืมกำหนด width — block element กินความกว้างเต็ม parent โดย default ถ้าไม่กำหนด width ก็ไม่มีที่ว่างให้ margin ขยาย ต้องกำหนด width ก่อนเสมอ เช่น width: 300px หรือ width: 80%
• ❌ สับสนว่า text-align: center ใส่ที่ element ไหน — text-align ใส่ที่ parent ที่ครอบข้อความนั้น เพื่อบอกว่าข้อความภายใน parent นี้ให้จัดกลาง
• ❌ ใช้ margin: auto กับ inline element — margin: auto ไม่ทำงานกับ inline element เช่น span หรือ a ต้องเปลี่ยนเป็น display: block หรือ display: inline-block ก่อน
• ❌ ต้องการ vertical centering แต่ใช้แค่ margin: auto — margin: auto แนวตั้งไม่ทำงานใน normal flow สำหรับ vertical centering ต้องใช้ Flexbox หรือ Grid

เปรียบเทียบเทคนิคการจัดกึ่งกลาง

เลือกวิธีตามสิ่งที่ต้องการจัดกลางและทิศทาง:

สรุปท้ายบท

จำหลักการนี้ไว้: "ดูก่อนว่า 'อะไร' ที่ต้องอยู่กลาง แล้วค่อยเลือกวิธี"

• ข้อความอยู่กลาง → text-align: center ใส่ที่ parent ที่ครอบข้อความ
• กล่องอยู่กลางแนวนอน → margin-inline: auto + width ที่ตัว element
• เนื้อหาใน container อยู่กลาง → display: flex + justify-content: center ที่ parent
• อยู่กลางทั้งสองแกน → display: flex + justify-content: center + align-items: center + height ที่ parent
• margin: auto แนวตั้งไม่ทำงานใน normal flow — ต้องใช้ Flexbox
• text-align จัดข้อความภายใน element ไม่ได้จัดตัว element เอง
• margin: auto ต้องมี width กำหนดก่อน ไม่งั้นไม่มีที่ให้ margin ขยาย

Lab 1 — จัดข้อความให้อยู่กลาง

เป้าหมาย: ฝึกใช้ text-align: center เพื่อจัดข้อความให้อยู่ตรงกลาง container โจทย์: .title ปัจจุบันข้อความชิดซ้าย กำหนด text-align: center ให้กับ .title เพื่อให้ข้อความอยู่ตรงกลาง ระบบจะตรวจ: 1. .title มี text-align: center ใน CSS 2. computed text-align ของ .title = center ใน browser 3. ข้อความอยู่กึ่งกลางของ container (ตรวจผ่าน getBoundingClientRect) เงื่อนไข: ห้ามเปลี่ยน HTML และห้ามใช้ flexbox หรือ margin สำหรับโจทย์นี้

Lab 2 — จัดกล่องให้อยู่กลางแนวนอน

เป้าหมาย: ฝึกใช้ margin-inline: auto ร่วมกับ width เพื่อจัดกล่องให้อยู่กลาง container โจทย์: .panel ปัจจุบันกินความกว้างเต็ม wrapper กำหนด width: 260px และ margin-inline: auto ให้กับ .panel เพื่อให้กล่องอยู่กลาง wrapper ระบบจะตรวจ: 1. .panel มี width ที่เล็กกว่า parent ใน CSS 2. .panel มี margin-inline: auto หรือ margin: 0 auto ใน CSS 3. .panel อยู่กึ่งกลางของ .wrapper ใน browser (ระยะห่างซ้ายและขวาใกล้เคียงกัน) เงื่อนไข: ห้ามเปลี่ยน HTML

Lab 3 — เลือกวิธีจัดกลางที่เหมาะกับแต่ละกรณี

เป้าหมาย: ฝึกเลือกเทคนิคการจัดกึ่งกลางที่เหมาะกับสถานการณ์ต่างกัน โจทย์: มี 3 ส่วนที่ต้องจัดกลาง แต่ละส่วนใช้วิธีต่างกัน: 1. .card-title — ต้องการจัดข้อความให้อยู่กลาง → ใช้ text-align: center 2. .info-box — ต้องการจัดกล่องให้อยู่กลาง container แนวนอน → ใช้ width: 200px และ margin-inline: auto 3. .badge-container — ต้องการจัด .badge ให้อยู่กลางทั้งแนวนอนและแนวตั้ง → ใช้ display: flex, justify-content: center, align-items: center ระบบจะตรวจ: 1. .card-title มี text-align: center 2. .info-box มี width และ margin-inline: auto 3. .badge-container มี display: flex และ justify-content: center และ align-items: center เงื่อนไข: ห้ามเปลี่ยน HTML