Cách căn giữa div theo chiều ngang bên trong div cha

114

Làm thế nào để tập trung một divchiều ngang bên mẹ của nó divvới CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

html css

— chim ưng
nguồn

1

Dưới đây là hai phương pháp đơn giản để căn giữa các div trong div, theo chiều dọc, chiều ngang hoặc cả hai (CSS thuần túy): stackoverflow.com/a/31977476/3597276

— Michael Benjamin

158

Tôi giả sử div mẹ không có chiều rộng hoặc chiều rộng rộng và div con có chiều rộng nhỏ hơn. Phần sau sẽ đặt lề cho phần trên và dưới bằng 0, và các cạnh sẽ tự động khớp. Điều này căn giữa div.

div#child {
    margin: 0 auto;
}

— Đánh dấu Nhúng
nguồn

@Dấu. Bạn có biết cách làm cho nó hoạt động trong IE6 không? IE6 thực sự rất tệ, nhưng vẫn có một số người sử dụng nó.

— Bakhtiyor

@Bakhtiyor: theo như tôi nhớ, nó có. Bạn đang gặp vấn đề gì? bạn có thể muốn mở một câu hỏi mới nếu có một số vấn đề cụ thể mà bạn đang gặp phải mà trước đây chưa được giải quyết. Tôi không có quyền truy cập vào IE6 để kiểm tra.

— Đánh dấu Embling

3

@Bakhtiyor: thực sự đã nghĩ về nó, tôi nghĩ trong IE.old, bạn cũng cần đặt text-align: center;trên parentdiv và sau đó đặt nó trở lại bên trái (hoặc bất cứ thứ gì) cho childcái. Không chắc liệu vấn đề đó có liên quan đến IE6 hay không ...

— Đánh dấu là Embling

@Mark & @Bakhtiyor vì lý do nào đó mà tôi thấy childdiv của mình dường như bị dịch chuyển sang trái - so với các trình duyệt tuân thủ nhiều tiêu chuẩn hơn - trong tất cả các phiên bản IE mà tôi đã kiểm tra (IE6-8). Và text-align: center;cho parentvà text-align: left;cho sự childcố định nó cho tất cả các phiên bản đó.

— brookmarker

8

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

— James Goodwin
nguồn

2

Giải pháp này hỗ trợ IE 6, nhưng đừng quên thêm text-align:left;vào #child div

— Moak

1

text-align:centercho div con hay div cha?

— Anish Nair

6

Chỉ cần quan tâm, nếu bạn muốn căn giữa hai hoặc nhiều div (để chúng nằm cạnh nhau ở trung tâm), thì đây là cách thực hiện:

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

— Paul Chris Jones
nguồn

4

Bạn có thể sử dụng giá trị "auto" cho lề trái và lề phải để cho phép trình duyệt phân phối không gian khả dụng bằng nhau ở cả hai bên của div bên trong:

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

— x4u
nguồn

2

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

— Soufiane Hassou
nguồn