フローティング画像ギャラリーを中央に揃える方法

Question

.containerのコンテンツを中央に揃えたいと思います。 私はギャラリーを作成するためにfloat：leftプロパティを使用しています。また、サムネイルのサイズを変更してトリミングするコードの一部です。

これを行う方法はありますか？

CSS：

.grid-item { 
    float: left; 
    width: 175px; 
    height: 120px; 
    overflow: hidden; 
} 
.grid-item img { 
    display: block; 
    max-width: 100%; 
    border: 2px solid #fff; 
    border-radius: 5px; 
    margin: 0 auto; 
} 

HTML：

<div class="container text-center"> 
    <div id="links"> 
     <a href="img.jpg" title="" class="grid-item" data-gallery> 
      <img src="img.jpg" alt="" class="img-rounded"> 
     </a> 
     <a href="img.jpg" title="" class="grid-item" data-gallery> 
      <img src="img.jpg" alt="" class="img-rounded"> 
     </a> 
     <a href="img.jpg" title="" class="grid-item" data-gallery> 
      <img src="img.jpg" alt="" class="img-rounded"> 
     </a> 
    </div> 
</div> 

Answer 1

あなたの内容を揃えるためにフレキシボックスを使用する必要がありますし、あなたがどのプロパティのために意味される理由としてCSSのコメントを読むことができます。それが役に立てば幸い。

#links{ 
 
display: flex; /*Generates a flexbox layout with default flex direction as row */ 
 
    width: 100%; /* Not really required */ 
 
    align-items: center; /*Aligns contents vertically */ 
 
    justify-content: space-around; /*Aligns contents horizontally */ 
 
    text-align: center; /*Aligns further text in the center */ 
 
    flex-direction:row; /*By default its row, you can change to column for vertical alignment */ 
 
    flex-flow:row wrap; /*To wrap items in other row when no more can be fit in the same row*/ 
 
} 
 

 
.grid-item { 
 
    /* flex:1; If you need them to grow or shrink flexibly */ 
 
    width: 175px; 
 
    height: 120px; 
 
    overflow: hidden; 
 
} 
 

 
.grid-item img { 
 
    display: block; 
 
    max-width: 100%; 
 
    border: 2px solid #fff; 
 
    border-radius: 5px; 
 
    margin: 0 auto; 
 
}

<div class="container text-center"> 
 
    <div id="links"> 
 
    <a href="http://via.placeholder.com/400x400" title="" class="grid-item" data-gallery> 
 
     <img src="http://via.placeholder.com/400x400" alt="" class="img-rounded"> 
 
    </a> 
 
    <a href="http://via.placeholder.com/400x400" title="" class="grid-item" data-gallery> 
 
     <img src="http://via.placeholder.com/400x400" alt="" class="img-rounded"> 
 
    </a> 
 
    <a href="http://via.placeholder.com/400x400" title="" class="grid-item" data-gallery> 
 
     <img src="http://via.placeholder.com/400x400" alt="" class="img-rounded"> 
 
    </a> 
 
    </div> 
 
</div>

Answer 2

通常私は、サブコンテナ内のコンテナ内の巣のすべてとは、私の好みにそれを微調整します。このような状況に遭遇したとき：

.container .center { 
 
    /* 
 
    This is just a way of centering the element, 
 
    you can use whatever technique. 
 
    */ 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translateX(-50%) translateY(-50%); 
 
}

<div class="container text-center"> 
 
    <div class="center"> 
 
    <div id="links"> 
 
     <a href="img.jpg" title="" class="grid-item" data-gallery> 
 
      <img src="img.jpg" alt="" class="img-rounded"> 
 
     </a> 
 
     <a href="img.jpg" title="" class="grid-item" data-gallery> 
 
      <img src="img.jpg" alt="" class="img-rounded"> 
 
     </a> 
 
     <a href="img.jpg" title="" class="grid-item" data-gallery> 
 
      <img src="img.jpg" alt="" class="img-rounded"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>