CSS จัดตำแหน่งปุ่ม ไว้กึ่งกลาง ชิดขวา ชิดซ้าย

สอนภาษา CSS เขียนโค้ดจัดตำแหน่งปุ่ม ไว้กึ่งกลาง ชิดขวา ชิดซ้าย โดยใช้ div ร่วมกับคำสั่ง text-align ของ css เพื่อจัดตำแหน่งปุ่มกด ปุ่ม Button ของภาษา HTML สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่างที่ 1 CSS จัดตำแหน่งปุ่ม ไว้กึ่งกลาง ชิดขวา ชิดซ้าย

<div style="width:100%;text-align:center;"><input type="button" value="ปุ่มตรงกลาง"></div>
<div style="width:100%;text-align:right;"><input type="button" value="ปุ่มชิดขวา"></div>
<div style="width:100%;text-align:left;"><input type="button" value="ปุ่มชิดซ้าย"></div>

ตัวอย่างที่ 2 CSS จัดตำแหน่งปุ่ม ไว้กึ่งกลาง ชิดขวา ชิดซ้าย

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

<div class="dev center"><input type="button" value="ปุ่มตรงกลาง"></div>
<div class="dev right"><input type="button" value="ปุ่มชิดขวา"></div>
<div class="dev left"><input type="button" value="ปุ่มชิดซ้าย"></div>

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