使列表项包含图片和其下方的标签

Question

我第一次尝试将我的设计编码到 HTML 和 CSS 中，我一直坚持执行这一部分：

我正在尝试构建这些白框的列表，我计划给每个项目一个白色边框来构建我的框，但我无法将 Label 标记编码为水平居中，并且在更改 img 后阻止显示的标签我无法设置填充或边距以在标签和图像之间提供合适的 space。

这是我目前所拥有的。

Html:

<div class="content">
<div class="container">

<ul class="grid">
    <li><img src="img/Icon-House.png"><label>Houses</label></li>

</ul>
</div>
</div>

CSS:

.content{
    background-color: #e24840;
    width: 743px;
    height: 300px;

    margin-top: 48px;
    margin-left: 183px;
    border-radius: 4px; 
    box-shadow: -5px 5px 10px #888888;
}

.content ul {
    float: left;

}

.content li {
    margin: 20px;
    width: 200px;
    height: 180px;
    border-color: white;
    border-width: 2px;
    border-radius: 4px;
    border-style: solid;
}

.content img{
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    display: block;
}

.content label{
margin-top: 48px;
margin-right: auto;
margin-left: auto;
}

Answer 1

我不会在这里使用 label 而是 figure 来包装图像和 figcaption.

.content {
  background-color: #e24840;
  width: 743px;
  height: 300px;
  margin-top: 48px;
  margin-left: 183px;
  border-radius: 4px;
  box-shadow: -5px 5px 10px #888888;
}
.content ul {
  float: left;
  list-style-type: none;
}
.content li {
  text-align: center;
  margin: 20px;
  width: 180px;
  height: 160px;
  border-color: white;
  border-width: 2px;
  border-radius: 4px;
  border-style: solid;
}
.content img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}
.content figcaption {
  background: yellow;
}

<div class="content">
  <div class="container">

    <ul class="grid">
      <li>
        <figure>
          <img src="http://lorempixel.com/output/city-q-c-100-100-4.jpg" />
          <figcaption>Houses</figcaption>
        </figure>
      </li>

    </ul>
  </div>
</div>

使列表项包含图片和其下方的标签

Make a list item hold a picture and a label below it

html

css

list

css-position

html-lists