CSS Căn chỉnh: Ngang, Dọc và Giữa

Chúng ta có thể căn chỉnh một phần tử hoặc nội dung bên trong nó bằng CSS, cung cấp nhiều tùy chọn cho việc căn chỉnh phần tử và nội dung của nó theo chiều ngang, dọc hoặc giữa.

Căn chỉnh theo chiều ngang (Horizontal Alignment)

1. Phần tử nội tuyến (Inline-elements)

Các phần tử nội tuyến hoặc inline-block như text, anchor, span, v.v. có thể được căn chỉnh ngang bằng thuộc tính CSS text-align.

2. Phần tử cấp khối (Block-level elements)

Các phần tử cấp khối như div, p, v.v. có thể được căn chỉnh ngang bằng thuộc tính CSS margin, nhưng chiều rộng của phần tử không được là 100% so với parent, vì nếu vậy nó sẽ không cần căn chỉnh.

3. Phần tử cấp khối dùng float hoặc position

Các phần tử có thể được căn chỉnh ngang bằng thuộc tính CSS float (căn nhiều phần tử sang trái/phải, không phải giữa) hoặc sử dụng phương thức absolute của CSS positioning.

Ví dụ căn chỉnh ngang

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

Căn chỉnh theo chiều dọc (Vertical Alignment)

1. Phần tử nội tuyến

Các phần tử nội tuyến hoặc inline-block như text, anchor, v.v. có thể được căn chỉnh dọc bằng CSS padding, line-height, hoặc vertical-align.

2. 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 dọc bằng CSS margin, CSS flex kết hợp với align-items, hoặc phương thức định vị absolute kết hợp với CSS transform.

Ví dụ căn chỉnh dọc

<!DOCTYPE html>
<html>
<head>
<title>CSS Vertical 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>

Căn chỉnh giữa (Central Alignment)

Chúng ta có thể căn chỉnh các phần tử ở giữa bằng các phương pháp đã nêu ở trên trong căn chỉnh ngang và dọc. Cách phổ biến hiện nay là sử dụng Flexbox:

.container {
    display: flex;
    justify-content: center; /* căn ngang */
    align-items: center;     /* căn dọc */
}