稍微偏离中心的按钮

我需要这些键上的container..as你可以看到，他们是浮动到左侧内水平居中。那是因为我有一个float：left;属性在他们身上。

但是，当我删除浮动：左;属性和应用文本对齐：中心;到容器，这是发生了什么......

enter image description here

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

容器的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>

来源

2015-05-21 Michael Yebba Jr

向我们展示更多您的代码。另外一个jsfiddle会帮助 – Andrew

进一步检查后，我注意到它在Firefox上完美显示，但没有集中在Chrome上......任何原因？ –

顺便说一句，这个小故障只发生在小分辨率，所以如果你想复制它，在Chrome上放大400-500％或调整窗口大小。 –

的偏差可能是由于各环节之间的空格字符。使用display: inline-block;时，这是一个常见问题。你可以用几种方法删除。方法1：设置为负letter-spacing。这取决于font-family和font-size，所以请尝试一些不同的值。

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

a.button { 
    letter-spacing: normal; 
}

方法2：删除链接之间的任何空格/换行符。这当然会使代码变得不可读。

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

方法3： Ommit所有链接，但最后收盘</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>

来源

2015-05-21 14:51:51 pstenstrm

无限大拇指向上。我应该知道得更好......谢谢......我只是删除了每个按钮之间的空格字符，并* bloop *问题解决了。 –

这是怎么发生在Firefox？ Firefox是足够聪明的删除空间或什么？ –

我猜firefox足够聪明。让我们希望其他浏览器效仿。 – pstenstrm

稍微偏离中心的按钮

回答

相关问题