如何将基于CSS <li>的导航栏居中？</li>

Question

我有一个基于CSS <li>的导航栏，其样式和实现如下：

CSS：

DIV.topbar_outer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height:33px;
    /*background-color: #202020;*/
}

DIV.topbar_inner {
    /*font info*/
    text-align: center;
    padding-top: 8px;
    /*layout*/
    position: absolute;
    left: 50%;
    width: 900px;
    height: 25px;
    margin-left: -450px;
    background-color: #202020;
}

/*Navigation bar format styling*/
.navigation_bar {
    border: 0px;
    margin-top: 0px;
}

.navigation_bar li {
    display: inline;
    list-style: none;
    padding-right: 10px;
    padding-left: 10px;
    text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 700; color: #FFFFFF; font-size: 13px;
}

/*Navigation bar link styling*/
.navigation_bar li a {
    text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 700; color: #FF0000; font-size: 13px;
}
.navigation_bar li a:hover {
    text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 700; color: #FFFFFF; font-size: 13px;
}

HTML：

<div class="topbar_outer">
    <div class="topbar_inner">
        <ul class="navigation_bar">
            <!-- Navigation bar items -->
            <li>
                HOME
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
            <li>
                <a href="#">PHOTOS</a>
            </li>
            <li>
                <a href="#">DINING</a>
            </li>
            <li>
                <a href="#">FUNCTIONS</a>
            </li>
            <li>
                <a href="#">CLUB EVENTS</a>
            </li>
            <li>
                <a href="#">BOWLS NEWS</a>
            </li>
            <li>
                <a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
</div>

我似乎遇到了topbar_inner容器中列表项集中的问题，这可以在下面看到：

这个列表似乎主要集中在中心位置，但偏离中心位置稍微偏右，足以引人注意。

任何人都可以为导航列表的绝对水平居中提供解决方案吗？

Answer 1

您的ul有一个左侧填充，浏览器会自动应用。只需删除它，一切都将居中。

只需添加padding: 0;，如下所示：

.navigation_bar {
    border: 0px;
    margin-top: 0px;
    padding: 0;
}

Answer 2

使用内联块而不是内联的li。您现在可以对它应用高度，并为li a

应用行高