Chúng tôi có thể căn chỉnh văn bản trong tài liệu html bằng cách sử dụng thuộc tính CSS text-align cho căn chỉnh theo chiều ngang và CSS padding-top với CSS padding-bottom hoặc CSS line-height để căn chỉnh theo chiều dọc.
Cú pháp
Sau đây là cú pháp cho các thuộc tính CSS được đề cập ở trên -
Selector {
text-align: center | left | right | justify | inherit | initial;
}
Selector {
padding: /*value*/;
}
Selector {
line-height: /*value*/;
} Hãy xem một ví dụ để căn chỉnh văn bản theo chiều ngang -
Ví dụ
<!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> Đầu ra
Hãy xem một ví dụ để căn chỉnh văn bản theo chiều dọc -
Ví dụ
<!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> Đầu ra
