Question

在每张图片周围使用此代码

<div class="side-by-side"> <a href="http://example.com ....>  (include ALL the code for the image here) </div>

这是CSS代码段

.side-by-side { float: left; margin-right: 5px }

它有效...我的意思是图像在一行上但不幸的是，图像左对齐，我希望它们集中在一起。

Answer 1

将图像包裹在div中并设置text-align:center;然后您不需要额外的div来包装您的标签，您只需设置标签本身的样式即可。像这样：

<div class="centered-content">
  <a href="#" class="side-by-side">
    <img src="http://placehold.it/100x100"/>
  </a>
  <a href="#" class="side-by-side">
    <img src="http://placehold.it/100x100"/>
  </a>
  <a href="#" class="side-by-side">
    <img src="http://placehold.it/100x100"/>
  </a>
</div>

和Css：

.centered-content{
  text-align:center;
}
.side-by-side{
  margin-right:5px;
  display:inline-block;
}

Answer 2

我会使用Flexbox来做到这一点。将div包裹在容器中

<div class="container">
    <div class="side-by-side"> <a href="http://example.com"></a>
    </div>
</div>

CSS

 .container {
       display: flex;
       justify-content: center;
}

一行中的多个图像CSS + Div

2 个答案: