divの中にCSSスプライトをどのように配置するのですか？

Question

私は自分のホームページに登場した複数の画像を結合するためにCSSスプライトを作成しました。しかし、私は今それらの画像を表示する問題があります。あなたは、画像（店舗ロゴ）が一元的に表示されていないことを確認

。ここに私の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; 
} 

：

私はマージンを持つすべての異なるオプションを試してきましたが、本当にそれを作ることはできませんでした。彼らはこのように見えるようにする方法任意のアイデア：

Answer 1

をフレキシボックスを使用してみてください：

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

Answer 2

は、あなたの.spriteのCSSでこれを試してみてください：

background-position: center; 

（私はそれhereた）

Answer 3

内部要素の中央にパディングを使用しないでください異なる高さで。

は親に高さを与え、BG色

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

を記入し、それを任意の高さとセンターとなりますので、変換を使用して、内側のdivを配置します。

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