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

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

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติ 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>

ผลลัพธ์

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

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

ตัวอย่าง

<!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>

ผลลัพธ์

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