Căn giữa nhiều trẻ DIV

Question

Tôi thấy có chút rắc rối khi làm việc xung quanh vấn đề này.

Tôi có DIV gốc và 3/nhiều Child DIV.

DIV gốc được căn giữa và con DIV sẽ được thả nổi bên trái nhưng phải được căn giữa.

CSS chứa,

.center { 
    float:left; 
    height:250px; 
    width:15%; 
    margin: 0 auto; 
    border: 1px solid black; 
} 

I have a sample of the code link here...

Answer 1

Nếu bạn muốn căn chỉnh theo chiều ngang các phần tử của mình một cách tập trung, thì đừng làm nổi chúng.

Thay đổi cách chúng được hiển thị để inline-block và sắp xếp chúng vào trung tâm bằng cách thay đổi text-align phong cách của cha mẹ:

#parent { 
 
    text-align:center; 
 
    height:450px; 
 
    width:75%; 
 
    border:1px solid blue; 
 
} 
 
.center { 
 
    display:inline-block; 
 
    height:250px; 
 
    width:15%; 
 
    margin: 0 auto; 
 
    border: 1px solid black; 
 
}

<div id="parent"> 
 
    <div id="child1" class="center"></div><!-- 
 
--><div id="child2" class="center"></div><!-- 
 
--><div id="child3" class="center"></div> 
 
</div>

Hãy chắc chắn để không có màu trắng-không gian hoặc dòng mới giữa các con của bạn <div> s (trong HTML của bạn, có nghĩa là) hoặc nhận xét nó ra. Bây giờ, đây là các phần tử nội tuyến, không gian trắng này sẽ được hiểu là không gian.

Answer 2

lề tự động sẽ không áp dụng đối với một yếu tố trong đó có một phao áp dụng. Loại bỏ phao sẽ giúp bạn bắt đầu ...