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中的注释，了解为什么要使用哪个属性。希望，它有所帮助。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

通常当我遇到这种情况时，我会将容器中的所有内容嵌入到子容器中并根据自己的喜好进行调整：

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

如何使浮动图像库居中

2 个答案: