การจัดตำแหน่งกลาง แนวนอน และแนวตั้ง ด้วย CSS

เราสามารถจัดตำแหน่งองค์ประกอบหรือเนื้อหาภายในได้หลายวิธีด้วย CSS ไม่ว่าจะเป็นแนวนอน แนวตั้ง หรือตรงกลาง

การจัดตำแหน่งแนวนอน (Horizontal Alignment)

• Inline elements - องค์ประกอบ inline หรือ inline-block เช่น ข้อความ ลิงก์ span สามารถจัดแนวนอนได้ด้วย text-align
• Block-level elements - องค์ประกอบบล็อก เช่น div, p สามารถจัดแนวนอนได้ด้วย margin แต่ความกว้างต้องไม่ใช่ 100% ของพาเรนต์
• ใช้ float หรือ position - จัดชิดซ้าย/ขวาด้วย float หรือจัดตำแหน่งเฉพาะจุดด้วย position: absolute

ตัวอย่างการจัดแนวนอน

<!DOCTYPE html>
<html>
<head>
  <title>CSS Horizontal Alignment</title>
  <style>
    .screen {
      padding: 10px;
      width: 70%;
      margin: 0 auto;
      background-color: #f06d06;
      text-align: center;
      color: white;
      border-radius: 0 0 50px 50px;
      border: 4px solid #000;
    }
    .seats span, .backSeats div {
      margin: 10px;
      padding: 10px;
      color: white;
      border: 4px solid #000;
    }
    .seats span {
      width: 120px;
      display: inline-block;
      background-color: #48C9B0;
    }
    .left { text-align: left; }
    .right { text-align: right; }
    .center { text-align: center; }
    .seats { text-align: center; }
    .backSeats div { background-color: #dc3545; }
    .leftFloat { float: left; }
    .rightAbsolute { position: absolute; right: 150px; }
  </style>
</head>
<body>
  <div class="screen">Screen</div>
  <div class="seats">
    <span class="left">Adam</span>
    <span class="center">Martha</span>
    <span class="right">Samantha</span>
    <div class="backSeats">
      <div class="leftFloat">Premium 1</div>
      <div class="leftFloat">Premium 2</div>
      <div class="rightAbsolute">Premium 3</div>
    </div>
  </div>
</body>
</html>

ผลลัพธ์

การจัดตำแหน่งแนวตั้ง (Vertical Alignment)

• Inline elements - ใช้ padding, line-height, หรือ vertical-align
• Block-level elements - ใช้ margin, flex ร่วม align-items, หรือ position: absolute ร่วม transform

ตัวอย่างการจัดแนวตั้ง

<!DOCTYPE html>
<html>
<head>
  <title>CSS Vertical Alignment</title>
  <style>
    .screen {
      padding: 10px; width: 70%; margin: 0 auto;
      background-color: #f06d06; text-align: center; color: white;
      border-radius: 0 0 50px 50px; border: 4px solid #000;
    }
    .seats span:not(.withPadding) {
      margin: 10px; padding: 10px; color: white; border: 4px solid #000;
    }
    .seats span:not(.vertical) {
      height: 40px; display: inline-block; background-color: #48C9B0;
    }
    .withPadding { padding: 20px 20px 0px; height: 20px; color: white; border: 4px solid #000; }
    .vertical { display: inline-table; background-color: #48C9B0; height: 40px; }
    .verticalText { display: table-cell; vertical-align: middle; }
    .withLineHeight { line-height: 40px; }
    .seats { text-align: center; }
    .backLeftSeat {
      background-color: #dc3545; max-height: 100px; height: 70px;
      margin: 20px; width: 300px; display: inline-block;
      position: relative; resize: vertical; overflow: auto; border: 4px solid #000;
    }
    .withPosition {
      position: absolute; top: 50%; left: 2px; right: 2px;
      color: white; padding: 20px; transform: translateY(-50%);
    }
    .backRightSeats {
      height: 122px; width: 800px; float: right;
      display: inline-flex; flex-direction: row;
      justify-content: center; align-items: center;
    }
    .withFlex {
      background-color: #dc3545; border: 4px solid #000;
      margin-right: 10px; color: white; padding: 20px;
    }
  </style>
</head>
<body>
  <div class="screen">Screen</div>
  <div class="seats">
    <span class="withPadding">Adam</span>
    <span class="withLineHeight">Martha</span>
    <span class="vertical"><p class="verticalText">Samantha</p></span>
    <div>
      <div class="backLeftSeat">
        <div class="withPosition">Premium Readjustable Sofa</div>
      </div>
      <div class="backRightSeats">
        <div class="withFlex">Premium Solo 1</div>
        <div class="withFlex">Premium Solo 2</div>
        <div class="withFlex">Premium Solo 3</div>
      </div>
    </div>
  </div>
</body>
</html>

ผลลัพธ์

เมื่อ div ยังไม่ปรับ:

เมื่อ div ปรับแล้ว:

การจัดตำแหน่งกลาง (Central Alignment)

สามารถจัดกลางได้โดยรวมวิธีการจัดแนวนอนและแนวตั้งที่กล่าวมาข้างต้น