如何在跨度内垂直对齐这些元素？

Question

这是我试图实现的原型。

这就是我现在所拥有的

我现在要做的是垂直对齐所有元素（span s与图像和文字） - 我的帐户，卡片，旅行等。

以下是本节的HTML和CSS

HTML：

   <div id="header">
      <img class ="header_component" src="Logo.PNG" />
      <span class="header_component">
        <img src="MyAccount.PNG"/><BR/>
        My Account
      </span>
      <span class="header_component">
        <img src="Cards.PNG"/> <BR />
        Cards
      </span>
      <span class="header_component">
        <img src="Cards.PNG"/> <BR />
        Travel
      </span>
      <span class="header_component">
        <img src="Rewards.PNG"/> <BR />
        Rewards
      </span>
      <span class="header_component">
        <img src="Business.PNG"/> <BR />
        Business
      </span>
    </div>

CSS：

.header_component {
    width: 12%;
    float:left;
    text-align: center;
    vertical-align: middle; 
}

我尝试应用我从垂直对齐中学到的vertical-align: middle属性但是没有完成这项工作（元素在span中没有垂直对齐）。

有没有人知道任何可行的替代风格？

Answer 1

我稍微进行了重组，在每个项目的内容周围添加了一个包装器（用于居中），并将float更改为inline-block到标题项。父级的white-space: nowrap修复了换行问题。

#header {
  white-space: nowrap;
}
.header_component {
  text-align: center;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
}
.header_component div {
  max-width: 100%;
  max-height: 100%;
  margin-top: 50%;
  transform: translateY(-50%);
}

<div id="header">
  <img class="header_component" src="Logo.PNG" />
  <span class="header_component">
    <div class="inner">
      <img src="MyAccount.PNG"/><br />
      My Account
    </div>
  </span>
  <span class="header_component">
    <div class="inner">
      <img src="Cards.PNG"/><br />
      Cards
    </div>
  </span>
  <span class="header_component">
    <div class="inner">
      <img src="Cards.PNG"/><br />
      Travel
    </div>
  </span>
  <span class="header_component">
    <div class="inner">
      <img src="Rewards.PNG"/><br />
      Rewards
    </div>
  </span>
  <span class="header_component">
    <div class="inner">
      <img src="Business.PNG"/><br />
      Business
    </div>
  </span>
</div>