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


I'm trying for the first time to code my design into HTML and CSS and I'm stuck at implementing this part:

enter image description here

I'm trying to build a list of these white boxes, I planned to give each item a white border to build my box but I'm unable to code the Label Tag to be centered horizontally and after changing the img Label to block display I'm unable to set an padding or margin to give a decent space between the label and the image.

This what I've have so far.

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

Answers:


I wouldn't be using a label here but rather a figure to wrap the image and 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>