Căn (canh) giữa trong CSS đơn giản dễ hiểu

Trong bài viết này, Hocban.vn chia sẻ đến bạn cách để căn giữa (hay còn gọi là canh giữa) phần tử trong CSS đơn giản và dễ hiểu nhất có thể.

Căn giữa văn bản (text) theo chiều ngang

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

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

Bài viết có vẻ liên quan

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

Bài viết có vẻ liên quan ^ ^
avatar