Question

我想在figure元素中内嵌显示div个元素（包含图片），但它应该连续最多3张图片，水平居中。

像这样：

| X_X_X |
| X_X_X |
| _X_X_ |

这是CodePen示例：

段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

#out{
  width: 210px;
  text-align: center;
}

.fig-pic{
  width: 70px;
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

img{
  width: 100%;
}

＆＃13;

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

＆＃13;

However, watch out for the inline-block whitespace.

此外，删除figure默认margins。

JSFiddle

Answer 2

您可以将inline-block和width:33.3%用于figure，这样您每行将有3张图片，并且会有响应。只要内容不足以容纳整个text-align:center父级，例如您的最后一行，在父容器中使用width将使内容居中。

* {
  box-sizing: border-box /* apply box model ta all elements */
}
body {
  margin: 0; /* reset default margin for body */
}
#out {
  width: 100%;
  font-size: 0; /* fix inline-block gap */
  text-align: center; /* align content to center */
}
figure {
  display: inline-block;
  width: 33.3%; /* make images to fit 3 per row */
  padding: 5%; /* demo */
  margin: 0 /* reset default margin for figure */
}
img {
  max-width: 100% /* width won't have more than 100% of parent width */
}

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

使用您自己的示例;

你的fig-pic div需要

.fig-pic
{
  inline-block
  margin:0;
}

与每个人对齐。由于内联块元素之间总是有一点空间，因此您应该通过设置

来消除该空间

#out
{
  font-size:0 
}

或者让你的#out div更宽一些。集中使用：

#out
{
  text-align: center;
}

Codepen

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

段

3 个答案: