Chúng tôi có thể căn chỉnh một phần tử hoặc nội dung bên trong nó bằng cách sử dụng CSS cung cấp nhiều tùy chọn khác nhau để căn chỉnh một phần tử và nội dung của nó theo chiều ngang, chiều dọc hoặc ở giữa.
Căn chỉnh theo chiều ngang
- Phần tử nội tuyến
Các phần tử nội tuyến hoặc các phần tử khối nội tuyến như văn bản, neo, span, v.v. có thể được căn chỉnh theo chiều ngang với sự trợ giúp của thuộc tính CSS text-align.
- Phần tử cấp khối
Các phần tử cấp khối như div, p, v.v. có thể được căn chỉnh theo chiều ngang với sự trợ giúp của thuộc tính lề CSS, nhưng chiều rộng của phần tử không được bằng 100% so với phần tử gốc vì khi đó nó sẽ không cần căn chỉnh.
- Các phần tử cấp khối sử dụng lược đồ thực hoặc lược đồ vị trí
Các phần tử có thể được căn chỉnh theo chiều ngang với sự trợ giúp của thuộc tính float CSS giúp căn chỉnh nhiều phần tử sang trái / phải và không ở giữa hoặc sử dụng phương pháp tuyệt đối của lược đồ định vị CSS.
Ví dụ
Hãy xem một ví dụ về căn chỉnh theo chiều ngang CSS -
<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal 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, .backSeats div{
margin: 10px;
padding: 10px;
color: white;
border: 4px solid #000;
}
.seats span{
width: 120px;
display: inline-block;
background-color: #48C9B0;
}
.left{
text-align: left;
}
.right{
text-align: right;
}
.center{
text-align: center;
}
.seats{
text-align: center;
}
.backSeats div {
background-color: #dc3545;
}
.leftFloat{
float: left;
}
.rightAbsolute{
position: absolute;
right: 150px;
}
</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 class="backSeats">
<div class="leftFloat">Premium 1</div>
<div class="leftFloat">Premium 2</div>
<div class="rightAbsolute">Premium 3</div>
</div>
</div>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Căn chỉnh theo chiều dọc
- Phần tử nội tuyến
Các phần tử nội tuyến hoặc các phần tử khối nội tuyến như văn bản, ký tự liên kết, v.v. có thể được căn chỉnh theo chiều dọc với sự trợ giúp của CSS padding, CSS line-height hoặc CSS vertical-align.
- Phần tử cấp khối
Các phần tử cấp khối như div, p, v.v. có thể được căn chỉnh theo chiều dọc với sự trợ giúp của thuộc tính CSS margin, thuộc tính flex CSS cùng với CSS align-items hoặc bằng phương pháp lược đồ định vị tuyệt đối với thuộc tính biến đổi CSS.
Ví dụ
Hãy xem một ví dụ về căn chỉnh theo chiều dọc CSS -
<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal 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;
}
.backLeftSeat{
background-color: #dc3545;
max-height: 100px;
height: 70px;
margin: 20px;
width: 300px;
display: inline-block;
position: relative;
resize: vertical;
overflow: auto;
border: 4px solid #000;
}
.withPosition{
position: absolute;
top: 50%;
left: 2px;
right: 2px;
color: white;
padding: 20px;
transform: translateY(-50%);
}
.backRightSeats{
height: 122px;
width: 800px;
float: right;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.withFlex {
background-color: #dc3545;
border: 4px solid #000;
margin-right: 10px;
color: white;
padding: 20px;
}
</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>
<div>
<div class="backLeftSeat">
<div class="withPosition">Premium Readjustable Sofa</div>
</div>
<div class="backRightSeats">
<div class="withFlex">Premium Solo 1</div>
<div class="withFlex">Premium Solo 2</div>
<div class="withFlex">Premium Solo 3</div>
</div>
</div>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi div không được điều chỉnh
Khi div được điều chỉnh
Căn chỉnh trung tâm
Chúng tôi có thể căn chỉnh các phần tử một cách tập trung bằng các phương pháp được đề cập ở trên trong Căn chỉnh theo chiều ngang và theo chiều dọc.