html - 稍微偏离中心的按钮

Question

我需要这些按钮在它们的容器内水平居中。如您所见，它们向左浮动。那是因为我有一个 float: left;属性。

但是，当我移除 float: left;属性并应用 text-align: center;到容器，这就是发生的事情......

几乎居中，但不完全居中。这是怎么回事？谢谢! :)

容器的 CSS:

    #navbar {
    background: #303030;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

每个按钮的CSS:

        a.button {
        width: 16.3%;
        background: #4d4d4d;
        height: 50px;
        display: inline-block;
        text-decoration: none;
        color: #fff;
        text-align: center;
        max-width: 250px;
        padding-top: 12px;      
        box-sizing: border-box;
        font-size: 145%;
        transition-property: background, z-index, font-size, color;
        transition-duration: 0.35s;         
    }

相关的HTML

    <div id ="navbar">
<a href="https://www.answers.legal" class="button"><i class="fa fa-home"></i> HOME</a>
<a href="https://www.answers.legal/questions" class="button"><i class="fa fa-question"></i> Q&A</a>
<a href="https://www.answers.legal/forums" class="button"><i class="fa fa-comment"></i> FORUMS</a>
<a href="https://www.answers.legal/contact" class="button"><i class="fa fa-phone"></i> CONTACT</a>
<a href="https://www.answers.legal/support" class="button"><i class="fa fa-life-ring"></i> SUPPORT</a>
<a href="https://www.answers.legal/about" class="button"><i class="fa fa-info-circle"></i> ABOUT</a>
</div>
</div>

Answer 1

错位可能是由于每个链接之间的空格字符造成的。这是使用 display: inline-block; 时的常见问题.您可以使用几种方法删除。

方法一:设负letter-spacing .这取决于字体系列和字体大小，因此请尝试几个不同的值。

#navbar {
    letter-spacing: -4px; 
}

a.button {
    letter-spacing: normal;
}

方法二:删除链接之间的任何空格/换行符。这当然会使代码难以阅读。

<a href="https://www.answers.legal" class="button"><i class="fa fa-home"></i> HOME</a><a href="https://www.answers.legal/questions" class="button"><i class="fa fa-question"></i> Q&A</a><a href="https://www.answers.legal/forums" class="button"><i class="fa fa-comment"></i> FORUMS</a><a href="https://www.answers.legal/contact" class="button"><i class="fa fa-phone"></i> CONTACT</a><a href="https://www.answers.legal/support" class="button"><i class="fa fa-life-ring"></i> SUPPORT</a><a href="https://www.answers.legal/about" class="button"><i class="fa fa-info-circle"></i> ABOUT</a>

方法三:省略结尾 </a>对于除最后一个以外的所有链接。这仍然是有效的 HTML。一个<a>元素将在其后跟另一个 <a> 时自动关闭.

<a href="https://www.answers.legal" class="button"><i class="fa fa-home"></i> HOME
<a href="https://www.answers.legal/questions" class="button"><i class="fa fa-question"></i> Q&A
<a href="https://www.answers.legal/forums" class="button"><i class="fa fa-comment"></i> FORUMS
<a href="https://www.answers.legal/contact" class="button"><i class="fa fa-phone"></i> CONTACT
<a href="https://www.answers.legal/support" class="button"><i class="fa fa-life-ring"></i> SUPPORT
<a href="https://www.answers.legal/about" class="button"><i class="fa fa-info-circle"></i> ABOUT</a>