Căn giữa trong CSS (Center Div)

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>

Căn giữa trong CSS

Đố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>

Căn giữa trong CSS
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.

Related Posts

Hover-CSS-1

Hiệu ứng rê chuột trong CSS

CSS là ngôn ngữ trang trí với nhiều hiệu ứng hay. Bạn sẽ thường gặp nhất là khi di chuyển chuột vào một liên kết (Link) hay…

Mẫu Form đăng nhập HTML và CSS đẹp mắt

Trong một số bài viết trên blog này mình đã chia sẻ về cách tạo một Form đăng nhập đơn giản. Nhưng để có một Form đẹp…

form-lien-he-4

Hướng dẫn tạo form liên hệ bằng HTML, CSS

Form liên hệ là một chức năng không thể thiếu cho blog, website. Thông qua Form độc giả, khách hàng có thể yêu cầu admin trợ giúp…

css-code-1

8 Cách viết CSS chuẩn, dễ đọc và tối ưu

Nói tới xây dựng giao diện phía Front-end không thể thiếu CSS. Ngôn ngữ được sử dụng phổ biến để sắp xếp bố cục các phần tử…

Thuộc tính text-shadow trong CSS

Trong những lúc rảnh rỗi mình thường hay nghịch ngợm một vài thứ hay ho tìm thấy trên internet. Đối với CSS thì text-shadow cũng là thuộc…

Thuộc tính Overflow trong CSS

Khi thiết kế web với HTML và CSS đôi khi chúng ta sẽ gặp phải tình trạng văn bản (text) bị tràn ra khỏi phần tử HTML…