如何将一个css精灵居中在一个div中？

问题描述：

我创建了一个CSS精灵来组合我的主页中出现的几个图像。不过，我现在有问题显示这些图像。如何将一个css精灵居中在一个div中？

你看到的图像（商店徽标）不集中显示。这里是我的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; 
}

移除填充后，他们看起来像：

我一直在尝试所有不同的边缘选项，但无法真正做到这一点。任何想法如何使它们看起来像这样：

答

使用Flexbox的尝试：

.client { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

没有太大的区别。实际上，删除填充后，他们看起来更好（见图片）。但我仍然需要它们看起来像上次img我上传 – panipsilos

@panipsilos您可以尝试在'.client'中添加一些'height'我认为它应该可以工作。 – Stickers

对，使用一些高度和宽度，它实际上工作！ – panipsilos

答

试试这个在您的.sprite CSS：

background-position: center;

（我发现它here）

嗯，它没有工作 – panipsilos

答

不要使用填充来居中内部元素与不同的高度。

给高度与母体和填充背景颜色

.client { 
    padding: 0; 
    background: #ffffff; 
    height: 71px; 
}

，并使用变换内DIV位置，所以这将是中心具有任何高度。

.client > div { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

如何将一个css精灵居中在一个div中？

相关推荐