How to center align text over CSS shape?

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/