CSS Align

21/05/2019

Bài sau » « Bài trước

Center Align Cho phần tử HTML

Để canh giữa theo chiều ngang cho phần tử có display block (ví dụ như thẻ <div> )ta dùng thuộc tính margin: auto;

Thiết lập cho nó thuộc tính width cụ thể và phần còn lại sẽ được trình duyệt tính toán và chia đều cho 2 bên. Xem ví dụ bên dưới:

Thẻ <div> có width: 50%; và được canh giữa với margin: auto;.

div{ margin: auto; width: 50%; border: 2px solid blue; padding: 10px; }

Chú ý: Center align không hoạt động nếu thuộc tính width không được thiết lập hoặc giá trị là 100%.

Center Align Cho Text

Để canh giữa cho text trong thẻ HTML dùng text-align: center.

Text được canh giữa.

p{ border: 2px solid blue; padding: 10px; text-align: center; }

Chú ý: Để xem các ví dụ về canh align cho text, xem thêm bài học CSS Text.

Center hình ảnh

Để canh giữa cho hình ảnh, ta thiết lập margin-left, margin-right thành autodisplay: block cho hình ảnh.

CSS Align

img { display: block; margin-left: auto; margin-right: auto; width: 40%; }

Canh lề trái và phải sử dụng Position

Một cách để canh lề cho thẻ HTML là sử dụng position: absolute;

Đoạn text được canh lề phải với position: absolute. Sử dụng thuộc tính này có thể gây chồng, đè các phần tử với nhau và phần tử HTML cha nó phải có position khác giá trị static.

.right { position: absolute; right: 0px; width: 300px; border: 2px solid green; padding: 10px; }

Canh lề trái và phải sử dụng Float

Một cách khác để canh lề cho thẻ HTML là sử dụng thuộc tính float

.right { float: right; width: 300px; border: 3px solid green; padding: 10px; }

Canh giữa theo chiều dọc sử dụng Padding

Có nhiều cách để canh giữa phần tử theo chiều dọc trong CSS. Cách đơn giản là dùng padding top và bottom .

.center { padding: 50px 0; border: 2px solid green; }

Canh theo chiều dọc dùng padding-top: 50px và padding-bottom: 50px;

Kết hợp thêm text-align: center để canh theo chiều ngang.

.center { padding: 50px 0; border: 2px solid green; text-align: center; }

Canh theo chiều dọc dùng padding-top: 50px và padding-bottom: 50px; kết hợp thêm text-align: center;

Canh giữa theo chiều dọc sử dụng Line-height

Một cách khác để canh giữa phần tử là sử dụng line-height bằng với chiều cao height.

.center { line-height: 200px; height: 200px; border: 2px solid green; text-align: center; }

Canh giữa theo chiều dọc với line-height = height = 200px;

Canh giữa sử dụng position và transform

Một giải pháp khác để canh giữa nữa là sử dụng thuộc tính position kết hợp thuộc tính transform .

.center { height: 200px; position: relative; border: 2px solid green; } .center p { margin: 0; position: absolute; top: 50%; /* Ta cho top và left 50%, rồi sau đó dùng translate(-50%, -50%) để nó thụt về đúng chính giữa*/ left: 50%; transform: translate(-50%, -50%); }

Canh giữa sử dụng thuộc tính position kết hợp thuộc tính transform.

Bài hướng dẫn về CSS Align đến đây là kết thúc. Chúc các bạn thực hành tốt.

Bài sau » « Bài trước
Back to top