Làm thế nào để căn giữa (center) một phần tử HTML hoặc hình ảnh trong CSS?
Khi bạn thiết kế website các phần tử mặc định đều nằm sang bên trái. Nhưng nếu bạn biết một chút về CSS hoàn toàn có thể chỉnh sửa canh giữa theo ý của mình.
Bài viết này giúp bạn biết cách chỉnh sửa center cho trang web đẹp mắt hơn.
– Đối với text như H1, H2, H3, H4, H5, H6 và p thì bạn có thể dùng
text-align: center;
<html>
<head>
<style>
.tieude {
text-align: center;
border: 1px solid red;
}
</style>
</head>
<body>
<h1 class="tieude">Đây là tiêu đề</h1><br>
</body>
</html>
– Đối với phần tử HTML và hình ảnh bạn sẽ cần dùng đến
display: block;
margin: 0 auto;
Đoạn code để bạn test thử (Test trên W3SCHOLL)
<html>
<head>
<style>
.cangiua {
width: 200px;
height: 200px;
background: green;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="cangiua"></div>
</body>
</html>
Kết luận: Thông thường chúng ta khi căn giữa sẽ dùng đến margin: 0 auto; nhưng trong nhiều trường hợp nó sẽ không có tác dụng chính vì thế bạn cần dùng đến những code mình đã hướng dẫn ở trên.
