0

我有一个带有导航标签的页脚。我正在尝试将 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 左右的包装器内

提前致谢

4

1 回答 1

1

对于.nav_tab, 尝试display: inline-block代替float:left.

于 2013-08-03T17:00:49.207 回答