サムネイルを中央揃えする際の問題

Question

サムネイルの応答ページを作成しているため、中央に配置する必要があります。私は要素のサイズを％で定義します。したがって、コンテナからすべてのコンテンツを中央に配置しようとすると、左側の要素から余白に余裕があるため、動作していません。ここに私のHTMLは次のとおりです。

<div class="thumb-container">   
     <div class="clearfix">  
      <a href="" class="thumb-unit"></a> 
      <a href="" class="thumb-unit"></a> 
      <a href="" class="thumb-unit"></a> 
      <a href="" class="thumb-unit"></a> 
      <a href="" class="thumb-unit"></a> 
      <a href="" class="thumb-unit"></a> 
      <a href="" class="thumb-unit"></a> 
     </div>     
</div> 

とCSS：

.clearfix { 
     overflow: auto;} 
    .thumb-container { 
     width: 92%; 
     margin: 0 auto 0; 
     padding-top: 67px; 
     +clearfix;} 
    .thumb-unit { 
     display: block; 
     width: 27%; 
     padding-top: 35%; 
     margin-left: 5.55556%; 

     margin-top: 4.33%; 
     float: left; 
     position: relative; 
     overflow: hidden;} 

Answer 1

あなたのCSSスタイルは厄介です。あなたはここで2つのクラスを使って、あなたが望むものを得ることができます。下の1つを試してみてください。

HTML：

<div class="thumb-container">   
     <div class="clearfix">  
      <a href="" class="thumb-unit"> 
       <img src="http://placehold.it/350x150"> 
      </a> 
      <a href="" class="thumb-unit"> 
       <img src="http://placehold.it/350x150"> 
      </a> 
      <a href="" class="thumb-unit"> 
       <img src="http://placehold.it/350x150"> 
      </a> 
      <a href="" class="thumb-unit"> 
       <img src="http://placehold.it/350x150"> 
      </a> 
     </div>     
</div> 

CSS： a.thumbユニット{ 表示：ブロック; margin-left：auto; マージン右：自動}

.thumb-container { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     display: flex; /* add */ 
     justify-content: center; /* add to align horizontal */ 
     align-items: center; /* add to align vertical */ 
    } 

作業フィドルhere

Answer 2

を確認してくださいあなたはthumb-unitクラスの0 autoのマージンを試してみてください。あなたはまた、ちょっとしたものまできれいに取り除くことができるいくつかの不要なCSSを持っています。