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

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-align: middle 属性，但没有成功（元素在 span 中未垂直对齐）。

有谁知道任何可行的替代样式？

Answer 1

我稍微调整了结构以在每个项目的内容周围添加一个包装器（用于居中）并将 float 更改为 inline-block 到 header 项目。 white-space: nowrap parent 修复了换行问题。

#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>

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

How to vertically align these elements inside a span?

html

css

user-interface

prototype

user-experience