After successfully centering my text horizontally in my div using text-align: center, I'm now faced with the challenge of centering it vertically. Despite my attempts with vertical-align: middle;, I haven't been able to achieve the desired result.
For reference, here is a link to the codepen: http://codepen.io/anon/pen/Ioiaq
The code containing the text is located at the bottom of the HTML panel, and the text is "INFO."
Below is the current code snippet:
<div id="inf" style="
text-align:center;
background-color: white;
position: absolute; top:50%; left: 45%; width: 10%; height: 6%;
z-index: 10;
display: inline-block;">
<a href="#"><span>INFO</span></a>
</div>
Any suggestions on how to resolve this alignment issue are welcome, and the solution doesn't have to involve CSS specifically.