在顶部和底部显示图标和文本

Question

我正在使用CSS来在图标的顶部和底部显示图标和文本。

到目前为止，我已经尝试过这些代码。我对前端部分了解不多。我只能左右浮动和边距。

有人可以帮助我如何解决此问题。

<div class="sub-menu">
  <img src="css/images/nearby.png">
  <span class="menu-title">NEARBY</span>
</div>

.sub-menu {
  float: left;
  display: block;
}

.sub-menu .menu-title {
  clear: both;
  margin-top: 20px;
}

Answer 1

请尝试使用以下CSS代码：

.sub-menu {
  float: left;
  display: block;
  text-align: center;
}

.sub-menu .menu-title {
  display: block;
  margin-top: 20px;
}

<div class="sub-menu">
  <img src="css/images/nearby.png">
  <span class="menu-title">NEARBY</span>
</div>

Answer 2

尝试使用以下代码片段使其正常工作。使用Display：flex。

.sub-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
}

.sub-menu .menu-title {}

<div class="sub-menu">
  <img src="css/images/nearby.png">
  <p class="menu-title">NEARBY</p>
</div>