我无法将导航对齐到页眉右侧。在网络上搜索,我认为问题是因为我将元素垂直对齐到中心,而 float 选项不适用。
有什么线索吗?
参见:http://jsfiddle.net/PabloArteeL/T7JDJ/
HTML:
<header>
<div class="logowrapper" style="padding-left:1em;">
<div class="logo"></div>
</div>
<nav><a href="#">SOME LINK</a>
</nav>
</header>
CSS:
header {
background-color: #eaeaea;
height: 80px;
margin: 10px;
}
.logowrapper {
display: table-cell;
height: 80px;
vertical-align: middle;
text-align: center;
}
.logo {
display: inline-block;
background-image: url("http://placehold.it/250x40");
width: 250px;
height: 40px;
}
nav {
right: 0px;
display: table-cell;
vertical-align: middle;
}
nav a {
color: black;
text-decoration: none;
}
期望的效果:
最佳答案
你需要给<nav>
宽度和变化text-align:left;
至 text-align:center;
否则它不会居中文本:
nav {
display: table-cell;
vertical-align: middle;
text-align: center;
width:400px;
}
结果:
JSFiddle
关于html - header : Logo to the left, 向右导航。 (垂直居中对齐),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24977087/