html - CSS/HTML 导航居中困惑

Question

我的导航是这样的:

非常不平衡，对吧..我的头脑有点崩溃。我已经不知道我在做什么了。我想请教一些帮助如何将它居中。这是 css 的代码:

.navigation {
    width: 886px;
    height: 84px;

    background: url('../img/nav_bg.png') no-repeat;
    margin: 0 auto;
}

.navigation ul {
    margin: 0;
    padding: 0;
    list-style: none outside;
    padding-top: 22px;
    padding-left: 63px;
}

.navigation ul li {
    display: inline-block;
    list-style-type: none; 
}

.navigation ul li a {
    display: block;
    text-align: center;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
    padding-left: 16px;
    padding-right: 16px;
    text-transform: uppercase;
    font-size: 14px;
}

Answer 1

Flexbox 还不是 100% 支持跨浏览器

从这个链接可以看出:http://caniuse.com/#feat=flexbox

Flebox 如今得到了很好的支持，但如果您仔细查看每个方 block 上的这些符号，您会发现在某些浏览器(尤其是移动设备)上，支持并不完全，而是部分支持。

全局(带前缀)82.47% + 10.5% = 92.97%

无前缀:71.8% + 0.38% = 72.18%

如果你真的想使用它，你应该添加一个前缀。

**

使用不同的方法 - display:table;

**

另一方面，我建议您使用另一种更稳定且在所有浏览器上都受支持的方法:

看display:table;的支持情况

链接: http://caniuse.com/#search=display%3Atable

要解决您的问题，您可以删除所有具有固定值的 padding-top 并使用 vertical-align:middle 和 display:table-cell。这样无论 ul 的高度是多少，它都将始终垂直居中。

• 水平居中 ul 元素使用 text-align:center;
• 垂直居中 通过将 .navigation 容器设置为 display:table; 并将 ul 元素设置为 display:table -cell; 和 vertical-align:middle;

代码示例:

.navigation {
    width: 100%;
    height: 84px;
    background: lightgrey;
    margin: 0 auto;
    display:table;
}

.navigation ul {
    padding: 0;
    list-style: none outside;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}    

.navigation ul li {
    display: inline-block;
    list-style-type: none; 
}

.navigation ul li a {
    display: block;
    text-align: center;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
    padding-left: 16px;
    padding-right: 16px;
    text-transform: uppercase;
    font-size: 14px;
}

检查Jsfiddle:http://jsfiddle.net/a_incarnati/bmkspm69/1/