css - 一行多图 CSS + Div

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 来包裹您的 a 标签，您可以只为 a 标签本身设置样式。像这样:

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