如何在范圍內垂直對齊這些元素？

Question

這是我嘗試實現的原型。

這是我現在所擁有的

我現在想做的是垂直對齊所有元素（ 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-align: middle屬性，該屬性是我從Vertical Alignment中學到的，但沒有完成這項工作（元素未在span垂直對齊）。

有誰知道其他可行的樣式嗎？

Answer 1

我已經進行了稍微的重組，為每個項目的內容添加了一個包裝器（用於居中），並將float更改為inline-block到標題項目。 white-space: nowrap父級上的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>