Cách căn giữa trong CSS với thuộc tính text-align
Bài viết này Hocban.vn chia sẻ đến bạn cách để Căn giữa trong CSS với thuộc tính text-align. Cũng khá là dễ hiểu, các bạn nghịch thử nhé !
Căn giữa văn bản (text) theo chiều ngang
Căn giữa trong CSS đơn giản dễ hiểu
Rất đơn giản, để canh giữa một đoạn văn bản, ta chỉ cần sử dụng thuộc tính text-align và cho nó giá trị center là xong. Cú pháp của nó có dạng:
.tên-class-hoặc-id {
text-align: center;
}
Căn giữa văn bản theo chiều dọc
Căn giữa phần tử theo chiều dọc
Cũng đơn giản không kém, để căn giữa theo chiều dọc bạn sử dụng thuộc tính vertical-align cho nó giá trị middle là được. Cú pháp của nó có dạng:
.tên-class-hoặc-id {
vertical-align: middle;
}
Căn giữa một đối tượng theo chiều dọc lẫn chiều ngang.
Canh giữa phần tử theo chiều dọc lẫn chiều ngang
Bạn thêm cái này ngay bên dưới đối tượng muốn căn giữa theo chiều ngang và chiều dọc, mình gọi nó là căn trung tâm.
.tên-class-hoặc-id {
(đoạn này là css có sẵn)
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding: 10px;
margin: 10px auto;
}
Ví dụ minh họa các bạn xem demo bên dưới. Mình mô tả: trường hợp này là bạn muốn tạo một nút bấm bên trong một cái khung, và cái khung đó có sẵn nội dung rồi. Để cho nút bấm nằm ra chính giữa theo chiều ngang thì bạn thêm code vào #khung-nho thôi. Nhưng nếu bạn muốn tất cả trong khung lớn được canh trung tâm thì thêm đoạn code trên vào #khung-lon mới được nhé !
See the Pen
Căn trung tâm trong CSS by Hocban.vn (@hocbanvn)
on CodePen.
Như vậy là mình đã hướng dẫn xong cho bạn cách căn giữa văn bản và phần tử bấc kỳ trong CSS rồi. Nếu bạn có điều gì thắc mắc hoặc góp ý thì có thể để lại bình luận bên dưới nhé !
