플로팅 된 이미지 갤러리를 센터링하는 방법

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

당신은 당신의 내용을 정렬 인 flexbox를 사용해야하고 어떤 속성에 대한 의미 이유에 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>