我需要這些鍵上的container..as你可以看到,他們是浮動到左側內水平居中。那是因爲我有一個float:left;屬性在他們身上。
但是,當我刪除浮動:左;屬性和應用文本對齊:中心;到容器,這是發生了什麼......
幾乎居中,但並不完全。這是怎麼回事?謝謝! :)
容器的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>
向我們展示更多您的代碼。另外一個jsfiddle會幫助 – Andrew
進一步檢查後,我注意到它在Firefox上完美顯示,但沒有集中在Chrome上......任何原因? –
順便說一句,這個小故障只發生在小分辨率,所以如果你想複製它,在Chrome上放大400-500%或調整窗口大小。 –