How to center align text over CSS shape? - html

Question

For navigation, I opted to use CSS shapes rather than images with overlaid text. However, in every browser, the text appears misaligned towards the right.
Preview on jsFiddle
HTML code:
<nav id="globalNav">
<ul>
<li>
<div class="stars"></div>
<a id="navHome">home</a>
</li>
<li>
<div class="stars"></div>
<a id="navWork">work</a>
</li>
<li>
<div class="stars"></div>
<a id="navAbout">about</a>
</li>
</ul>
</nav>
CSS code:
#globalNav {
position: fixed;
z-index: 1;
width: 100%;
height: 100px;
top: 0;
left: 0;
overflow: hidden;
background-color: #1b2326;
color: #2A363B;
}
#globalNav ul {
margin: 1.25em auto;
padding: 0;
position: relative;
-webkit-padding-start: 0;
-moz-padding-start: 0;
text-align: center;
}
#globalNav li {
padding: 0 3.5em;
display: inline-block;
}
#globalNav a {
position: absolute;
top: 1.3em;
padding: 0 0.25em;
-moz-padding-start: 0;
font-size: 1em;
text-transform: uppercase;
color: #FECEA8;
}
#globalNav a:hover {
position: absolute;
top: 1.3em;
padding: 0 0.25em;
-moz-padding-start: 0;
font-size: 1em;
text-transform: uppercase;
color: #ED6161;
-webkit-transition: .3s ease-in;
-moz-transition: .3s ease-in;
-ms-transition: .3s ease-in;
-o-transition: .3s ease-in;
transition: .3s ease-in;
}
/* dodecagram stars */
.stars {
background: #2A363B;
width: 60px;
height: 60px;
position: relative;
}
.stars:before, .stars:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 60px;
background: #2A363B;
}
.stars:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
.stars:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
I already searched the forum (i.e., Center text with background CSS “shape”), however the solution didn't work for me.

Answer 1

Add the following CSS to your <a> tags inside the shapes and they will align in the center of the shape :)
position: absolute;
top: 1.3em;
-moz-padding-start: 0;
font-size: 1em;
text-transform: uppercase; /* Also, note that I removed the padding */
color: #FECEA8;
display: block;
width: 60px;
word-wrap: break-word;
}
http://jsfiddle.net/TVkNK/7/

Answer 2

Adding text-align:center to the css did it for me. I also used padding-top to add appropriate padding for vertical centering.