如何在包装器中居中浮动左导航标签？

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。