Các kỹ thuật căn chỉnh CSS rất quan trọng để định vị các phần tử. Chúng giúp phân phối không gian giữa nội dung một cách hợp lý. Các kỹ thuật này bao gồm căn chỉnh ngang và dọc sử dụng các thuộc tính khác nhau. Ví dụ như margin: auto, position: absolute, text-align và padding. Bài viết này trình bày nhiều phương pháp để đạt được căn chỉnh trong CSS.
Các phương pháp căn chỉnh trong CSS:
. Căn giữa bằng Margin:
Thuộc tính margin: auto căn giữa một phần tử khối theo chiều ngang.
Lưu ý: Sử dụng margin: auto sẽ không hoạt động trong IE8 trừ khi khai báo !DOCTYPE.
Ví dụ 1: Ví dụ này mô tả căn chỉnh CSS bằng thuộc tính margin: auto.
HTML<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Center Align Elements</h2>
<div class="center">
This is div element on which
margin auto is used to horizontally
align it into center
</div>
</body>
</html>
Kết quả:
. Căn chỉnh bằng Position:
Thuộc tính position: absolute căn chỉnh các phần tử tương đối so với khối chứa của chúng.
Lưu ý: Các thuộc tính position như top, bottom, left và right sẽ không hoạt động. Bạn cần đặt thuộc tính position trước.
Ví dụ 2: Ví dụ này mô tả căn chỉnh CSS bằng thuộc tính position: absolute;.
HTML<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Right Align</h2>
<div class="right">
<p>
Absolute positioned elements
can overlap other elements.
</p>
</div>
</body>
</html>
Kết quả:
. Căn chỉnh văn bản:
Thuộc tính text-align: center căn giữa văn bản bên trong vùng chứa của nó.
Ví dụ 3: Ví dụ này mô tả căn chỉnh CSS bằng thuộc tính text-align: center;.
HTML<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h1 style="color:green;
text-align: center;">
GeeksforGeeks
</h1>
<h2>BOTH TEXTS ARE AT CENTER</h2>
<div class="center">
<p>This text is centered.</p>
</div>
</body>
</html>
Kết quả:
. Căn chỉnh dọc bằng Padding:
Thuộc tính padding property có thể được sử dụng để căn giữa các phần tử theo chiều dọc.
Ví dụ 4: Ví dụ này mô tả căn chỉnh CSS bằng thuộc tính padding.
HTML<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h1 style="color:green;
text-align:center;">
GeeksforGeeks
</h1>
<h2>Center Vertically</h2>
<div class="center">
<p>This is vertically centered.</p>
</div>
</body>
</html>
Kết quả:
. Kết hợp căn chỉnh dọc và ngang:
Kết hợp padding và text-align: center để căn giữa các phần tử theo cả chiều dọc và chiều ngang.
Ví dụ 5: Ví dụ này mô tả căn chỉnh CSS bằng các thuộc tính padding & text-align.
HTML<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
Here we use padding and
text-align to center the
div element vertically
and horizontally:
</p>
<div class="center">
<p>
This text is vertically
and horizontally centered.
</p>
</div>
</body>
</html>
Kết quả:
Các kỹ thuật căn chỉnh CSS cung cấp nhiều tùy chọn để định vị các phần tử. Nó cũng giúp quản lý khoảng trống giữa các phần tử đó. Hiểu và sử dụng hiệu quả các thuộc tính như margin, position, text-align và padding. Điều này có thể cải thiện đáng kể bố cục và thiết kế của trang web.
Trình duyệt được hỗ trợ:
- Google Chrome 95.0
- Microsoft Edge 95.0
- Firefox 93.0
- Opera 80.0
- Safari 15.0