html - 如何在包装器中居中 float 左侧导航选项卡？

Question

我有一个带导航标签的页脚。我试图将 960px 的包装内的选项卡居中，左右填充为 20。选项卡位于包装器内，并且向左浮动。我似乎可以将它们居中的唯一方法是在导航包装上放置一个宽度，但它并不是完全居中的。

它应该是这样的:

这是 html:

<div class="wrapper">
        <div class="footer_nav clear">
            <a href="">
                <div class="nav_tab">
                    Home
                </div>
            </a>
            <div class="nav_tab">&#124;</div>
            <a href="">
                <div class="nav_tab">
                    About Us
                </div>
            </a>
            <div class="nav_tab">&#124;</div>
            <a href="">
                <div class="nav_tab">
                    Portfolio
                </div>
            </a>
            <div class="nav_tab">&#124;</div>
            <a href="">
                <div class="nav_tab">
                    Contact Us
                </div>
            </a>
        </div>
        <div class="copyright">
            Copyright 2013 Lanai Construction. License #579449
        </div>
        <div class="social_wrapper_footer">
            <div class="fb">
            </div>
            <div class="t">
            </div>
        </div>
    </div>

和CSS:

.footer_nav {
 margin:0px auto 0px auto;
 margin-top:40px;
 margin-bottom:5px;
 vertical-align:center;
}
.nav_tab {
 font-family:'Edmon';
 font-size:14px;
 font-weight:bold;
 float:left;
 color:#fff;
 text-align:center;
 margin-right:10px;
}

这一切都在一个 960 加上左右 20px 的包装器中

提前致谢

Answer 1

对于 .nav_tab，尝试使用 display: inline-block 而不是 float:left。