css - 如何在div中内联显示图形元素

Question

我想在 div 元素中内联显示 figure 元素(包含图像)，但它最多应该是连续 3 个图像，水平居中。

像这样:

|X_X_X|
|X_X_X|
|_X_X_|

这是一个 CodePen示例:

片段

#out {
  width: 210px;
  height: auto;
  display: inline-block;
  margin: 0 auto;
}
.pic {
  width: 70px;
}
.fig-pic {
  position: relative;
  width: 70px;
}

<div id="out">
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
</div>

Answer 1

将inline-block 放入.fig-pic so you can use text-align on them :

#out{
  width: 210px;
  text-align: center;
}

.fig-pic{
  width: 70px;
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

img{
  width: 100%;
}

<div id="out">
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure><!--
  --><figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure><!--
  --><figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure><!--
--><figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure><!--
--><figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
</div>

However, watch out for the inline-block whitespace.

此外，删除图形默认边距。

JSFiddle