我创建了一个 css sprite 来组合出现在我主页上的几张图片。但是,我现在在显示这些图像时遇到了问题。
您会看到图像(商店 Logo )没有集中显示。这是我的 html 代码:
<div class="slider-slick">
<?php foreach($stores as $store){?>
<div class="slide">
<div class="client">
<div class="sprite sprite-<?php echo $store->_storeName?>"></div>
</div>
</div>
<?}?>
</div>
Sprite 的CSS是:
.sprite {
background-image: url(../images/spritesheet-logos.png);
background-repeat: no-repeat;
margin: auto;
}
.sprite-store1 {
width: 149px;
height: 71px;
background-position: -5px -5px;
}
.sprite-store2 {
width: 148px;
height: 23px;
background-position: -164px -5px;
}
父div是:
.client {
padding: 70% 0 0;
background: #ffffff;
}
去除填充后它们看起来像:
我一直在尝试所有不同的 margin 选项,但无法真正做到。关于如何使它们看起来像这样的任何想法:
最佳答案
尝试使用 flexbox:
.client {
display: flex;
justify-content: center;
align-items: center;
}
关于html - 如何在 div 中居中一个 css sprite?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42316613/