When using the gasket on top to maintain the proportions for the layout of the fluid, how do I vertically center the text on the background image?

Question

I could not find a solution to this issue and I want to change everything that I need, as long as I can save a couple of things.

The entire list item should be a link, the text inside this link should be oriented to the list item that has a background image. I need this fluid, so I prefer to use the top to keep the aspect ratio and create the right height. Using this top layer to create height, I can’t understand for life how to get the text vertically in the center. I saw several other questions that affect this question somewhat, but I did not find a single person. Please help me!

Here is a living example. I need text to vertically align to the middle of the blue elements. http://jsbin.com/OxuxECI/1/edit?html,css,output

HTML

<section> <ul> <li><a id="monday" href="_monday.html"><span>Monday</span></a></li> </ul> </section> 

CSS

  section { position: relative; width: 86.029411764%; height: 100%; margin: -6px auto 0 auto; overflow: hidden; } section ul { list-style-type: none; display: inline-block; width: 35%; min-width: 320px; padding: 0; margin: .8rem; height: 100%; } section li { width: 100%; display: block; background: url(_images/daybg_03.png) center center no-repeat; background-size: contain; margin: .8rem auto .8rem auto; text-align: center; font-size: 0; line-height: 0; } section ul li a { width: 100%; **padding-top: 14.95%;** /* This gives my container height */ display: inline-block; text-decoration: none; text-align: center; } section ul li a span { font-size: 1.3rem; color: white; text-align: center; } 

Answer 1

Okay, so after searching high and low, and I had no luck, I figured it out!

CSS

  section li { position: relative; width: 100%; height: auto; display: block; background: url(_images/daybg_03.png) center center no-repeat; -webkit-background-size: contain; -moz-background-size: contain; background-size: contain; margin: .8rem auto 0 auto; list-style: none; text-align: center; font-size: 0; padding-top: 14.95%; } section ul li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-decoration: none; text-align: center; background: rgba(0,191,85,.5); } section ul li a span { display: block; position: absolute; bottom: 0; width: 100%; height: 50%; line-height: 0; font-size: 1.3rem; color: white; text-align: center; background: rgba(0,159,255,.5); } 

And bin http://jsbin.com/enuBeyE/1/edit?html,css,output

I left the background colors there for visual assistance for each container.

Answer 2

Infinity Designs answer works well, but only if you don't need content that spans more than one line.

If you need content that spans more than one line inside flexible, dynamic vertical and vertical vertical containers with a fixed aspect ratio, there is good news and bad news:

• The good news: There is a pure CSS method that works in GC, FF, IE7 +, etc. etc.
• The bad news: the code is not very good: it needs four (!) Shell elements plus a non-semantic spacer. Only three wrappers are needed for the Infinity Designs method, so use this if you don't need text wrapping.

This is essentially Infinity Designs' approach to flexible fluid aspect ratio, mixed with Kizu's vertical centering approach on this other subject , using a side-by inline-block side inline-block with vertical align around the nested block.

Jsbin demo

Code example:

 <div class="w1"> <!-- make w2 <a> if like the asker you want it all to be a clickable link --> <span class="w2"><span class="hh"> </span> <span class="w3"> <!-- make w3 <a> if don't want the bkg clickable --> <span class="w4"><!-- or, any block element --> Monday </span> </span> </span> </div> <style> .w1 { /* outer wrapper for aspect ratio */ position: relative; /*or absolute*/ display: block; /*or inline-block*/ padding-top: 25%; /*aspect ratio*/ } .w2 { /* wrapper2 resets position to top */ position: absolute; top: 0; width: 100%; height: 100%; display: block; } .w3 { /* wrapper3 and hh sit side by side */ display: inline-block; width: 100%; text-align: center; } .w3, .hh { vertical-align: middle; display: inline-block; } .hh { height: 100% } .w4 { /* v.align applies to child block */ display: block; } </style>