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

จัดข้อความให้อยู่ตรงกลางในแนวตั้งด้วย CSS มักจะเจอบ่อยๆ ในการทำเว็บไซต์ เพราะส่วนใหญ่ถ้าใช้ html เรามักจะเจอการจัดข้อความในแนวนอน ซึ่งสามารถใช้คำสั่ง text-align:center ได้อยู่แล้ว แต่ในเมื่อเป็นแนวตั้ง ต้องใช้เทคนิคนิดหน่อยด้วย CSS ในการจัดข้อความให้อยู่ตรงกลางในแนวตั้งด้วย CSS

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

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

จัดข้อความให้อยู่ตรงกลางในแนวตั้งด้วย CSS เราต้องใช้ Parent Div หรือ Div ที่เป็นตัวครอบข้างนอกอีกที และต้องมี children Div หรือ Div ลูก ที่อยู่ข้างใน เหมือนในรูปด้านล่างครับ จากรูปผมได้ตั้งชื่อ div ที่เป็น Parent ว่า .flexbox-container แล้วเขียน CSS ตั้งค่า Display ให้เป็น flex กำหนด align-items : center โค้ดที่เหลือเป็นการตกแต่งเพิ่มเติม เช่น -ms, -webkit เพื่อให้ support ต่างเบราเซอร์นั้นเอง

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

จากรูปด้านล่างคือ ผลลัพธ์…

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

อ่านเพิ่มเติม

http://www.w3schools.com/css/css_boxmodel.asp
http://www.siamhtml.com/css-flexbox-คืออะไร-สอนวิธีใช้/
http://www.w3schools.com/css/css_rwd_grid.asp

Hasan Lebaesa

เริ่มทำงานกับ Web Agency กทม. ลาออกมาทำฟรีแลนซ์เต็มตัว และลาออกจากการเป็นฟรีแลนซ์ ก่อตั้งบริษัท, ปี 2019 ตั้งเป้าไว้ว่า จะเขียนบทความดีๆ วีคละ 1 บทความ. About Me