為什么我的頂部導航和列不會居中？

Question

此問題是從網站管理員Stack Exchange遷移的，因為可以在Stack Overflow上回答。 遷移 8年前 。 了解更多 。

http://min.us/mvoed0E

那是我的html和css文件的鏈接。 我不知道為什么我的利潤沒有居中。 另外，我不知道為什么文本超出了容器。

Answer 1

您試圖將容器對齊，即使它位於其他元素中

所以首先我將此添加到您的導航

<li class="active">
<li><a class="floatr" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Story</a></li>
<li><a href="#">Order</a></li>
</ul>

並擺脫了<div class="floatr"></div>

然后我稍微改變了CSS

.lavalamp ul li a {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-family: 'Merriweather', Helvetica, Arial, sans-serif;
    }

.floatr {
    top: 10px;
    z-index: 50;
    width: 80px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;


       -webkit-border-radius : 8px;
        background : rgba(0,0,0,.20);
        -web

kit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}