So I am trying to make a little "card", to show information about products. Now I want a little picture of each product at the top, but I need to center it verticle and horizontally.

I also need to give the image/div a little space, tried doing margin-top: 1em; but didn't do anything at all.

Here is my HTML code:

```
<div class="container">
  <div class="row">
    {% for auction in auctions%}
    <div class="col-sm-4">
      <div class="auction-item">
        <div class="img-container">
          <img
            src="/static/img/grass.png"
            alt="Grass Block"
            class="item-icon"
          />
        </div>
        <h2>{{ auction.name }}</h2>
        <div class="average-price">
          <h3>Average Price: {{ auction.start_bid }}</h3>
        </div>
        <div class="time-left">
          <h3>Time Left: time</h3>
        </div>
        <div class="graph-div">
          <a class="graph-tag" href="#">Show Graph</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

```

CSS can be found here:

```
.img-container {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #333;
  margin-top: 1em;
  margin: auto;
  text-align: center;
}

.item-icon {
  width: 80%;
}

.auction-item {
  width: 275px;
  height: 320px;
  background-color: blue;
  border-radius: 25px;
  margin: 3em;
}

.auction-item h2 {
  color: white;
  font-size: 24px;
  text-align: center;
  padding-top: 1em;
}

.auction-item h3 {
  color: white;
  font-size: 20px;
  text-align: center;
  padding-top: 1em;
}

.graph-div {
  text-align: center;
  padding-top: 1em;
}

.graph-tag {
  color: white;
  font-size: 20px;
}

```

And here is how it looks right now:

[![image](https://i.stack.imgur.com/Sx5UZ.png)](https://i.stack.imgur.com/Sx5UZ.png)