html - 在响应式和使用边框的 html5 中居中导航

Question

我发现了很多使用技巧使导航居中的方法。通过将行高和高度设置为彼此相等或使用 vertical-align with display:table。它有效，但我的边框总是出现在容器的底部而不是文本。

*{
    margin:0px;
    padding:0px;
}
header{
    display:block;
    height:100px;
    background-color:blue;
}
nav{
    height:auto;
    width:100%;
    display:block;
}
nav a{
    height:100%;
    text-align:center;
    display:inline-block;
    text-decoration:none;
    color:black;
    margin-left:25px;
    font-size: 25px;
}

nav a:hover{
    border-bottom: 3px solid #F3008A;
}
}

<header>
<nav>
    <a href="#"> Link </a>
    <a href="#"> Link </a>
    <a href="#"> Link </a>
    <a href="#"> Link </a>
</nav>
</header>

为了澄清问题，我想将标题 block 中的文本或“a”标记垂直居中。我想这样做并且还能够在边框靠近文本的“a”标签上放置边框。

Answer 1

您可以使用表格单元格显示垂直对齐方法。

* {
    margin:0px;
    padding:0px;
}
header {
    display:table;
    width: 100%;
    height: 100px;
    background-color:blue;
}
nav {
    height:auto;
    width:100%;
    display:table-cell;
    vertical-align: middle
}
nav a {
    text-align:center;
    display:inline-block;
    text-decoration:none;
    color:black;
    margin-left:25px;
    font-size: 25px;
    position: relative;
    border-bottom: 3px solid blue;
}
nav a:hover {
    border-bottom: 3px solid #F3008A;
}

<header>
    <nav> <a href="#"> Link </a>
 <a href="#"> Link </a>
 <a href="#"> Link </a>
 <a href="#"> Link </a>

    </nav>
</header>

http://jsfiddle.net/wdabedbv/