我有一个行宽8个div彼此相邻。容器有:
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的中心。但是(我认为)由于比例代码,它并没有将它们完全对齐在中心......有什么东西可以解决这个问题吗?
问候
您可以将项目设置为flex容器并使内容居中,如下所示:
.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>