如何在范围内垂直对齐这些元素？

Question

Here is the prototype I am trying to implement.

Here is what I have right now

What I am trying to do right now is vertically align all the elements( span s with image and text) - My Account, Cards, Travel, etc..

Here is my HTML and CSS for this section

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; 
}

I tried applying the vertical-align: middle attribute I learned from Vertical Alignment but that didn't do the job(elements not vertically aligned in span ).

Does anyone know of any alternative styles that could work?

Answer 1

I've restructured slightly to add a wrapper around the contents of each item (for centering) and change float to inline-block to the header item. white-space: nowrap on the parent fixes line breaking issues.

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