CSS จัดรูปให้อยู่ตรงกลางของหน้าเว็บไซต์

สอนภาษา CSS เขียนโค้ดจัดรูปภาพ ให้อยู่ตรงกลางของหน้าเว็บไซต์ ด้วยคำสั่ง text-align ร่วมกับการกำหนด div ให้มีค่าความกว้างเท่ากับ 100% และวิธีกำหนดค่า CSS ผ่านแท็ก style สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่างที่ 1 CSS จัดรูปให้อยู่ตรงกลางของหน้าเว็บไซต์ ผ่าน attribute style

<div style="text-align:center;width:100%;">
    <img src="https://www.devdit.com/favicon-16x16.png">
</div>

ตัวอย่างที่ 2 CSS จัดรูปให้อยู่ตรงกลางของหน้าเว็บไซต์ ผ่านการเรียกใช้ class ของ CSS

<style>
    .div {
        text-align: center;
        width: 100%;
    }
</style>

<div class="div">
    <img src="https://www.devdit.com/favicon-16x16.png">
</div>

โค้ดทั้ง 2 ตัวอย่างให้ผลลัพธ์ที่เหมือนกัน ต่างกันที่วิธีที่ 1 เขียน CSS ไว้ใน attribute style ของ HTML ส่วนวิธีที่ 2 เป็นการเขียนโค้ด CSS แยกจาก HTML และเรียกใช้ผ่าน attribute class ของ div