css - 一行CSS + Div中包含多个图像

在每个图像周围使用此代码

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

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

最佳答案

将图像包装在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;
}

关于css - 一行CSS + Div中包含多个图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38624036/