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

ข้อความอยู่ตรงกลางแนวตั้ง แนวนอน ใน div ด้วย CSS บทความนี้สอนใช้คำสั่ง vertical-align ร่วมกับ display เพื่อจัดให้ข้อความอยู่ตรงกลางของ div ทั้งแนวนอน และแนวตั้ง สามารถเขียนโปรแกรมได้ดังนี้

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

<style>
    .box {
        width: 300px;
        height: 100px;
        border: solid 3px darkcyan;
        vertical-align: middle;
        display: table-cell;
    }
</style>

<div class="box">ข้อความตรงกลาง</div>

ข้อความอยู่ตรงกลางแนวตั้ง แนวนอน ใน div แนะนำให้ใช้คำสั่ง vertical-align: middle ร่วมกับ display: table-cell เพื่อจัดให้ข้อความอยู่ตรงกลางทั้งแนวตั้ง และแนวนอน ใน div