导航栏中间的徽标会影响导航的其余部分

Question

我尝试将所有导航项目居中并让它们水平对齐

然而，当我将.logo课程添加到导航栏时，我的所有导航项目都向下移动..我该如何解决这个问题？

这是JSFiddle：http://jsfiddle.net/nq397fby/

Answer 1

http://jsfiddle.net/AlexCharlton/nq397fby/6/

ul.navigation li {
    vertical-align: top;
    display: table-cell;
    height: 40px;
    width: 20%;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
}

.logo {
    position:relative;
    top: -30px;
    left: 6px;
}

Answer 2

您只需将position:absolute添加到您的班级：

Demo Fiddle

ul.navigation li.logo {
    margin: 0;
    padding: 0;
    position:absolute;
}

也就是说，您可能希望定位子链接元素以创建更好的对齐方式：

Demo Fiddle

ul.navigation li.logo {
    margin: 0;
    padding: 0;
    position:relative;
}
ul.navigation li.logo a {
    position:absolute;
    left:20px;
    top:-42px;
}

Answer 3

只需使用vertical-align: top

即可

ul.navigation li {
    display: table-cell;
    height: 40px;
    width: 20%;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
    vertical-align: top;
}

demo

编辑：徽标对齐

ul.navigation li.logo {
    margin: 0;
    padding: 0;
    position: relative;
    top: -37px;
}

demo