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

Question

这是我正在尝试实现的原型。

这是我现在拥有的

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

这是我本节的 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 Alignment 中学到的 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>