使用包含<img/>的<li>显示文字

Question

我一直试图在图片下方或上方显示文字，如下所示：

目前，我坚持只显示图像（示例给出）：

我不能使用W3schools提供的确切代码，因为我的缩略图展开并在点击时切换到响应式旋转木马。我只想用缩略图显示名称。我无法发布我的代码，因此我上传了一张带有我的照片的图片＆gt;标签：

<div class="container">
    <ul id="myGallery">
        <li><img src="link.png" /></li>
        <li><img src="link.png" /></li>
        <li><img src="link.png" /></li>
        <li><img src="link.png" /></li>
        <li><img src="link.png" /></li>
    </ul>
</div>

Answer 1

您只需使用flex即可。

如下所示

＆＃13;

＆＃13;

ul {
 list-style: none;
 display: flex;
 flex-wrap: wrap;
}

ul li {
  margin: 0 5px 5px 0;
  text-align: center;
  border: 1px solid #000;
}

＆＃13;

<div class="container">
  <ul id="myGallery">
    <li>
      <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
      <p>First image</p>
    </li>
    <li>
      <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
      <p>Second image</p>
    </li>
    <li>
      <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
      <p>Third image</p>
    </li>
    <li>
      <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
      <p>Fourth image</p>
    </li>    
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

第二种方法，使用figure。

如下所示

＆＃13;

＆＃13;

/*figure approach*/

.figures {
  display: flex;
  flex-wrap: wrap;
}

figure {
  margin: 0;
  margin-right: 5px;
  text-align: center;
  border: 1px solid #000;
}

＆＃13;

<div class="figures">
  <figure>
    <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
    <figcaption>First image</figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
    <figcaption>Second image</figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
    <figcaption>Third image</figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
    <figcaption>Fourth image</figcaption>
  </figure>
</div>

＆＃13;

＆＃13;

＆＃13;

更新

问题jsfiddle - https://jsfiddle.net/raw9b1fj/2

解决方案jsfiddle - https://jsfiddle.net/raw9b1fj/4/