CSS縮放圖像並對齊中心

Question

我的行寬度為8格，彼此相鄰。 該容器具有：

display: flex;
flex-wrap: wrap;

容器中的物品：

text-align: center;
flex: 1 1 0;
width: 0;

項目內的圖像：

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);

所有項目內部都有一個圖像，現在我需要將這些圖像對准div的中心。 但是（我認為）由於比例尺代碼的原因，它無法將它們精確地對准中心...是否有解決方法？

問候

Answer 1

您可以使項目成為彈性容器並將內容居中，如下所示：

 .flex { display: flex; flex-wrap: wrap; } .item { border: 1px solid red; /* just so we can see the border */ text-align: center; flex: 1 1 0; width: 0; } .image { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .fixed .item { display: flex; justify-content: center; align-items: center; } 

 <h1>Original</h1> <div class="flex"> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> </div> <h1>Fixed</h1> <div class="flex fixed"> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> <div class="item"> <img class="image" src="https://picsum.photos/100" /> </div> </div>