Question

对于导航，我选择使用CSS形状而不是带有重叠文本的图像。但是，在每个浏览器中，文本都显示在右侧错位。

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代码：

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

我已经搜索了论坛（即Center text with background CSS “shape”），但解决方案对我没有用。

Answer 1

将以下CSS添加到形状内的<a>标记中，它们将在形状的中心对齐：）

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

将text-align：center添加到css为我做了。我还使用了padding-top来为垂直居中添加适当的填充。

如何将文本居中对齐CSS形状？

2 个答案: