เว็บสไตล์ชีท
CSS ทิป & ทริค

การจัดตำแหน่งไว้้กลางเอกสาร

การใช้ CSS เพื่อจัดตำแหน่งวัตถุไว้กลางเอกสาร มีสามแบบด้วยกัน:

• การจัดบรรทัดตัวหนังสือไว้กลางเอกสาร
• การจัดบล็อกตัวหนังสือหรือรูปไว้กลางเอกสารแนวนอน
• การจัดบล็อกตัวหนังสือหรือรูปไว้กลางเอกสารแนวตั้ง

การจัดบรรทัดตัวหนังสือไว้กลางเอกสาร

การจัดตำแหน่งวัตถุไว้กลางเอกสารที่ง่ายที่สุดคือ การจัดบรรทัดตัวหนังสือในย่อหน้าหรือบริเวณหัวเรื่อง โดยใช้คำสั่ง 'text-align' ใน CSS

P { text-align: center }
H2 { text-align: center }

คำสั่งนี้จะทำให้แต่ละบรรทัดใน ย่อหน้า และหัวเรื่อง (H2) อยู่กึ่งกลางระหว่างค่า margin ที่กำหนด ดังนี้:

การจัดบล็อกตัวหนังสือหรือรูปไว้กลางเอกสารแนวนอน

บางครั้งเราอาจต้องการให้ตัวหนังสือหรือรูปภาพทั้งหมดในย่อหน้าอยู่กึ่งกลางของเอกสาร การจัดตัวหนังสือหรือรูปภาพเช่นนี้ สามารถทำได้โดยการกำหนดให้ส่วนที่ต้องการจัดเป็นบล็อก และให้ค่า margin ซ้าย ขวา มีค่าเท่ากันโดยใช้ค่า 'auto' ซึ่งการกำหนดบล็อกจำเป็นต้องให้ความกว้างของบล็อกมีค่าตายตัว เพื่อให้ CSS สามารถแบ่งค่าซ้าย ขวาให้เท่ากันได ้ดังตัวอย่าง:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">จะได้ผลดังนี้...

วิธีนี้ยังใช้ได้กับการจัดรูปภาพไว้กลางเอกสารอีกด้วย: โดยกำหนดให้ภาพเป็นบล็อกและให้ใช้ margin เป็น auto ดังตัวอย่างด้านล่าง:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

การจัดบล็อกตัวหนังสือหรือรูปไว้กลางเอกสารแนวตั้ง

ใน CSS  2 ไม่มี property ช่วยจัดตำแน่งวัตถุไว้กลางเอกสารในแนวตั้ง อย่างไรก็ตามเราสามารถประยุกต์ property สองสามตัวร่วมกัน เพื่อช่วยจัดตำแหน่งดังกล่าวได้ โดยสร้างคลาสคลุมวัตถุที่ต้องการและกำหนดให้บล็อกเป็นตาราง ซึ่งสามารถใช้สมบัติของตารางที่สามารถจัดวัตถุไว้กึ่งกลางเอกสารแนวตั้งได้

ตัวอย่างด้านล่างจะทำการจัดบล็อกย่อหน้าที่มีความสูงค่าหนึ่งไว้กลางเอกสารในแนวตั้ง ตัวอย่าง แสดงการจัดย่อหน้าและรูปไว้กลางเอกสารทั้งแนวตั้ง แนวนอนในหน้าต่างเบราเซอร์ โดยบล็อกดังกล่าวใช้ property absolute-position ที่มีความสูงเท่าหน้าต่าง

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>ย่อหน้านี้...
</DIV>