การตั้งค่าการจัดตำแนวข้อความด้วย CSS

เราสามารถจัดตำแนวข้อความในเอกสาร HTML โดยใช้คุณสมบัติ text-align ใน CSS สำหรับการจัดตำแนวแนวนอน และ padding-top กับ padding-bottom หรือ line-height ใน CSS สำหรับการจัดตำแนวแนวตั้ง

ไวยากรณ์

ไวยากรณ์สำหรับคุณสมบัติ CSS ที่กล่าวมาข้างต้น:

Selector {    text-align: center | left | right | justify | inherit | initial; } Selector {    padding: /*value*/; } Selector {    line-height: /*value*/; }

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

ตัวอย่าง

<!DOCTYPE html> <html> <head> <title>CSS Text Alignment</title> <style> .screen {    padding: 10px;    width: 70%;    margin: 0 auto;    background-color: #f06d06;    text-align: center;    color: white;    border-radius: 0 0 50px 50px;    border: 4px solid #000; } .seats span{    margin: 10px;    padding: 10px;    color: white;    border: 4px solid #000;    width: 120px;    display: inline-block;    background-color: #48C9B0; } .left{    text-align: left; } .right{    text-align: right; } .center{    text-align: center; } .seats{    text-align: center; } </style></head> <body> <div class="screen">Screen</div> <div class="seats"> <span class="left">Adam</span> <span class="center">Martha</span> <span class="right">Samantha</span> </div> </body> </html>

ผลลัพธ์

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

ตัวอย่างเพิ่มเติม

<!DOCTYPE html> <html> <head> <title>CSS Text Alignment</title> <style> .screen {    padding: 10px;    width: 70%;    margin: 0 auto;    background-color: #f06d06;    text-align: center;    color: white;    border-radius: 0 0 50px 50px;    border: 4px solid #000; } .seats span:not(.withPadding){    margin: 10px;    padding: 10px;    color: white;    border: 4px solid #000; } .seats span:not(.vertical){    height: 40px;    display: inline-block;    background-color: #48C9B0; } .withPadding{    padding: 20px 20px 0px;    height: 20px;    color: white;    border: 4px solid #000; } .vertical{    display: inline-table;    background-color: #48C9B0;    height: 40px; } .verticalText {    display: table-cell;    vertical-align: middle; } .withLineHeight{    line-height: 40px; } .seats{    text-align: center; } </style></head> <body> <div class="screen">Screen</div> <div class="seats"> <span class="withPadding">Adam</span> <span class="withLineHeight">Martha</span> <span class="vertical"><p class="verticalText">Samantha</p></span> </body> </html>

ผลลัพธ์