•
Tạo bởi user-9drbjz5 3 năm trước

CSS canh một phần tử div nằm giữa một phần tử div khác

Làm sao để style một phần tử <div> với độ rộng nhất định nằm ở chính giữa một phần tử <div> bao ngoài nó. Ví dụ như đoạn mã HTML ở dưới đây phần tử:

<div id="outer" style="border: 1px solid red;">
  <div id="inner" style="border: 1px solid #333; width: 100px">Inner</div>
</div>

Thì phần tử div#inner sẽ nằm giữa phần tử div#outer?

2 Câu Trả Lời

Nam Nguyễn Nam Nguyễn •

Trước tiên bạn cần hiển thị phần tử #outer theo kiểu block:

#outer {
    display: block;
    /* border */
    border: 1px solid red;
}

Sau đó sử dụng thuộc tính margin cho phần tử #inner với giá trị auto:

#inner {
    margin: 0 auto;
    /* border & width */
    border: 1px solid #333
    width: 100px;
}
Phan Quang Phan Quang •

Bạn có thể canh theo cả chiều dọc và chiều ngang bằng flexbox

#outer { 
    display: flex;
    align-items: center;
    justify-content: center;
}
Nội dung tối thiểu 100 ký tự

Thêm Hình Ảnh

Tải ảnh từ máy tính hoặc sử dụng hình ảnh từ web.
Dung lượng tối đa 2Mb.

Câu Hỏi Liên Quan

Câu Hỏi Nổi Bật