Làm cách nào để căn giữa các mục bên trong thùng chứa đồng vị?

Question

Tôi có một lưới đồng vị với chiều rộng không cố định và tôi không biết cách căn giữa các mục bên trong thùng chứa đồng vị.

.box{ 
width: 40px; 
height: 40px; 
background-color: #e74c3c; 
margin: 0 auto; 
} 

rằng css không căn giữa các mục. here là liên kết đến fiddle minh họa sự cố của tôi.

Làm cách nào để tạo trung tâm hình vuông màu đỏ bên trong hộp đen?

Answer 1

Cách dễ nhất là sử dụng nề:

jsFiddle

var $container = $('#container'); 
// init 
$container.isotope({ 
// options 
itemSelector: '.box', 
masonry: { 
columnWidth: 40, 
isFitWidth: true 
} 
}); 

Answer 2

Dường như mỗi hộp của bạn đang được giao absolute định vị như vậy:

<div class="box" style="position: absolute; left: 0px; top: 0px;"></div> 
<div class="box" style="position: absolute; left: 80px; top: 0px;"></div> 
<div class="box" style="position: absolute; left: 160px; top: 0px;"></div> 
<div class="box" style="position: absolute; left: 240px; top: 0px;"></div> 

Con đường tôi đã nhận nó làm việc là để bọc tất cả các ô trong một div container, và thao tác các relative vị trí của rằng container mới như thế này (hoặc kiểm tra fiddle này):

var $container = $('#container'); 
 
// init 
 
$container.isotope({ 
 
    // options 
 
    itemSelector: '.box', 
 
    layoutMode: 'fitRows' 
 
});

#container { 
 
    background-color: #333; 
 
    width: 90%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
#boxes-collection { 
 
    position: absolute; 
 
    left: 28%; 
 
    width: 100%; 
 
} 
 

 
.box { 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: #e74c3c; 
 
    margin: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://squaredoodletest.t15.org/JS/isotpoe.js"></script> 
 
<div id="container"> 
 
    <div id="boxes-collection"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>