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?
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.