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

我有一个带导航标签的页脚。我试图将标签放在一个960像素左右填充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>

这都是在一个960加20px左右的包装内

---

提前感谢您使用

.nav_选项卡

，请尝试使用

显示：内联块

而不是

浮动：左

当我不使用display:inline block或float left时，制表符居中但垂直堆叠。按照@Michelle所说的做，并将

文本对齐：居中添加到
。包装器

.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;
}