4
Oct

สอนทำเว็บ ตอน จัดตำแหน่งข้อความให้อยู่ตรงกลางกล่องในแนวตั้ง

Category: Blog / 3,893 views

สวัสดีครับผม ห่างหายการทำ How to ไปนาน วันนี้ระหว่างที่ผมนั่งพัฒนาเว็บไซต์ให้ลูกค้าอยู่ มีเทคนิคหนึ่งที่ผมต้องทำนั่นก็คือการทำข้อความให้อยู่ตรงกลางกล่องในแนวตั้งครับ เอพูดไปอาจจะไม่เห็นภาพ ก็คือประมาณว่าเราสร้าง Div ขึ้นมาสักกล่องหนึ่ง ซึ่งเราไม่รู้หรอกครับว่ากล่องนี้มันจะสูงเท่าไหร่ แต่เราอยากให้ข้อความข้างใน div ตัวนี้มันจัดตำแหน่งอยู่กึ่งกลางกล่องพอดี ดูรูปภาพดีกว่าครับ

จัดตำแหน่งข้อความให้อยู่ตรงกลางแนวตั้ง

จัดตำแหน่งข้อความให้อยู่ตรงกลางแนวตั้ง

จากรูปด้านบน เห็นไหมครับว่า ผมมีกล่องอยู่ แต่ละกล่องก็จะมีข้อความข้างใน โดยถ้าข้อความมันยาวมาก มันก็ยังมี space ระหว่างด้านบนกับด้านล่าง เท่าๆกัน แบบนี้แหล่ะครับที่เรียกว่าการจัดตำแหน่งให้อยู่ตรงกลางกลองในแนวตั้ง …ภาษาอังกฤษน่าจะเข้าใจง่ายกว่ามั้ง ฮ่าๆ นั่นก็คือ Vertical Alignment นั่นเองครับ

หลักการเขียนก็ไม่ยากครับ ใช้ภาษา CSS ง่ายๆ โดยคุณสมบัติที่สำคัญสำหรับการจัดข้อความให้อยู่ตรงกลางแบบนี้มีดังต่อไปนี้ครับ

  • display:table;
  • display:table-cell;
  • vertical-align:middle;

โดยโครงสร้างของ Div จะเป็นแบบนี้ครับ

จัดตำแหน่งข้อความให้อยู่ตรงกลางแนวตั้ง

จัดตำแหน่งข้อความให้อยู่ตรงกลางแนวตั้ง โดยใช้ภาษา CSS

จะเห็นว่าเราจะมีกล่อง Div มาสองกล่องครับ ตัวใหญ่สุดที่ไว้ครอบนั้นผมตั้งชื่อคลาสว่า outerbox และกล่องเล็กที่อยู่ข้างในสำหรับเก็บข้อความ ผมตั้งชื่อคลาสว่า innerbox ครับ

หลักการก็คือ div นอกสุดที่ครอบนั้น (.outerbox) ให้เราตั้งค่า display ให้เป็น table ครับ หลายๆคนคงยังไม่ชินกับ display แบบนี้ เพราะปกติใช้แต่แบบ display:block กับ display:inline ใช่ไหมครับ แล้วเจ้าตัว display:table มันคืออะไร?

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

ต่อมาสำหรับ div ด้านในที่ไว้ใส่ข้อความ (.innerbox) ให้เราตั้งค่า display เป็น table-cell ครับ จากนั้นก็เพิ่ม vertical-align:middle เพียงแค่นี้อะไรก็ตามที่อยู่ในกล่องนี้ก็จะถูกจัดตำแหน่งให้อยู่กึ่งกลางกลองในแนวตั้งแล้วแหล่ะครับ

ลองมาดูโค้ดกันดีกว่า

.outerbox{
    width:200px;
    display:table; /* ตั้งค่าให้เป็น table */
    float:left;
    margin-right:20px;
    border:1px solid #000;
    text-align:center;
    min-height:100px;
    padding:10px;
}
.innerbox{
    width:200px;
    display:table-cell; /* ตรงนี้ตั้งเป็น table-cell */
    vertical-align:middle; /* จัดตำแหน่งให้อยู่กึ่งกลางแนวตั้ง */
    border:1px solid #ff0000;
    text-align:center;
}

พวกคุณสมบัติอื่นๆของ css ก็ไปเขียนปรับแต่งเองได้ตามใจชอบนะครับ หัวใจสำคัญมันอยู่ที่สามตัวที่ผมบอกไปก่อนหน้าครับ ที่เหลือก็แล้วแต่เราว่าอยากให้มันมีลูกเล่นอย่างไร

ส่วนโค้ดภาษา HTML ก็เป็นแบบนี้ครับผม

<div class="outbox">
    <div class="innerbox">
        <p>Indoor Ligthing</p>
    </div>
</div>

เห็นไหมครับ ว่ามันเขียนไม่ยากเลย ลองนำไปใช้ดูกับโปรเจ็คชิ้นถัดไปของเราดูนะครับ อ้อ! อย่างไรก็แล้วแต่ คุณสมบัตินี้ใช้ได้กับ IE8 ขึ้นไปนะครับ (อยากให้ IE หายไปจากโลกเหลือเกิน ฮ่าๆ)

แล้วเจอกันใหม่ในบทความหน้าครับ ขอบคุณที่ติดตามผลงานครับผม

Tags:


Phraisohn Siripool is a Graphic Designer and Website Developer. Contact Buksohn for Your Business Endeavours
ปิดโหมดสีเทา