I have not been able to find a solution to this and am willing to change whatever I need to as long as I can keep a couple things.
The entire list element needs to be a link, the text within that link needs to be centered to the list item which has a background image. I need this fluid so I choose to use the padding-top to maintain the aspect ratio and to create the correct height. With using that padding top to create the height, I can not for the life of me figure out how to get the text vertically centered. I have seen a few other questions that addresses this issue somewhat but I have not found a single one answered. PLEASE help me!
Here is live example. I need the text to vertically align to the middle of 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;
}
line-height: 0;
stops text from wrapping normally (may be an issue in some cases) – Meza