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 得到了很好的支持，但是如果你仔细查看每个方块上的那些符号，你会发现支持不完整但在某些浏览器（尤其是移动设备）上是不完整的。

全球（带前缀） 82.47％+ 10.5％= 92.97％

<强>前缀的： 71.8％+ 0.38％= 72.18％

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

**

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

**

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

查看 display：table;

的支持

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

要解决您的问题，您可以使用固定值删除所有填充顶部，并使用vertical-align：middle和display：table-cell。这样，无论ul的高度如何，它都将始终垂直居中。

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

代码示例：

.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/

Answer 2

Flexbox也许可以帮到你。要使用flexbox将li居中，您只需将这些样式添加到.navigation ul

.navigation ul{
    display:flex;
    justify-content: center;
    align-items:center;
}

Answer 3

给ul {。}} {。} 通常，为了将父元素中的某些元素居中，父元素应为text-align: center，子元素应为text-align:center或display: inline-block。 HTML：

display: inline

CSS：

<ul>
<li>A</li>
<li>B</li>
<ul>