html - 在顶部和底部位置显示图标和文本

Question

我正在使用 CSS 来像这个图标一样在顶部和底部位置显示图标和文本。

到目前为止，我已经尝试过这些代码。我不太了解前端部分。我只能左右浮动或 margin 。

谁能帮我解决这个问题。

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

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

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

Answer 1

尝试使用下面的代码片段使其工作。使用显示: 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>