我创建了一个 css sprite 来组合主页中出现的多个图像。但是我现在在显示这些图像时遇到问题。
您会看到图像(商店徽标)没有集中显示。这是我的 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>
精灵的 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;
}
除去填充物后,它们看起来像:
我一直在尝试所有不同的保证金选项,但无法真正做到。任何想法如何让它们看起来像这样:
尝试使用弹性盒:
.client {
display: flex;
justify-content: center;
align-items: center;
}
不要使用 padding 将不同高度的内部元素居中。
为父级赋予高度并填充背景颜色
.client {
padding: 0;
background: #ffffff;
height: 71px;
}
并使用变换定位内部 div,因此它将以任何高度居中。
.client > div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
在精灵div上,添加边距:auto auto;