•
Created by user-9drbjz5 4 year(s) ago

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 Answer(s)

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;
}
Content must be at least 100 characters

Add Image

Upload image from computer or from URL.
Maximum 2Mb.

Related Discussion

Trending Discussions