I created a css sprite to combine several images appearing on my homepage. However I now have issues displaying those images.
You see that the images (store logos) are not displayed centrally. Here is my html code:
<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>
The css for the sprite is:
.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;
}
and the parent div is:
.client {
padding: 70% 0 0;
background: #ffffff;
}
After removing the padding they look like:
I've been trying all different options with margin but couldn't really make it. Any ideas how to make them look like this?
Try using flexbox:
.client {
display: flex;
justify-content: center;
align-items: center;
}