Html 如何在CSS形状上居中对齐文本？

对于导航，我选择使用CSS形状，而不是覆盖文本的图像。但是，在每个浏览器中，文本都会向右倾斜

HTML代码：

<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添加到你的

将文本对齐：中心添加到CSS为我做的。我还使用padding top为垂直居中添加了适当的填充。
这看起来居中，只是因为链接文本是4-5个字符。将主页改为StackOverflow，看看会发生什么。只有当你作弊并在“Stack”后面放一个空格，这样它才会包装起来！我没有更好的解决方案-只是把你的分开。：-）
#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);
    }

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;
}