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

Question

这是我要实现的原型(prototype)。

这是我现在拥有的

我现在想做的是垂直对齐所有元素(span 带有图像和文本)- 我的帐户、卡片、旅行等。

这是我为这一部分编写的 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>