css - CSS：水平居中两个图像，并给它们一个边距

Question

我正在使用引导程序为项目构建模板，我需要将一些社交图标居中，这是一张图片：

现在，我有一些 JS 来决定是否需要附加 1 个或 2 个社交图​​标，如果有 1 个图标，我只想将它居中，如果有 2 个图标，我想将它们彼此相邻，并留出很小的边距。单独使用 CSS 是否可行？

在图像中，我只是应用了一个左侧边距，并且由于它们是向左浮动的，这会使它们在一定程度上对齐，但这不是响应式的，并且它不支持单个图像。

这是HTML：

<div class="row social_row">
    <img class="social_icon" id="facebook_share" src="assets/images/social/facebook.png">
    <img class="social_icon" src="assets/images/social/pinterest.png">
</div>      

这是CSS：

.social_row {
   margin-right: 15px;
   margin-left: 15px;
}

.social_icon {
  height: 45px; 
  width: 45px; 
  display: block; 
  float: left;
  margin-right: 5%;
}

Answer 1

text-align:center行（.text-center我相信使用 Bootstrap 的类），然后将左/右页边距放在img.

http://bootply.com/88212

<div class="row social_row text-center">
    <img class="social_icon" id="facebook_share" src="assets/images/social/facebook.png">
    <img class="social_icon" src="assets/images/social/pinterest.png">
</div>

CSS：

.social_row img {
    margin:0 2.5%;
}