在 html5 中居中响应并使用边框的导航

Question

我找到了很多使用技巧使导航居中的方法。通过将行高和高度设置为彼此相等或使用垂直对齐来显示：表。它有效，但我的边框总是在容器的底部而不是文本。

*{
    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>

为了澄清这个问题，我想在标题块内垂直居中文本或"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/

Answer 2

您需要

删除display:inline-block;并给出line-height。它将解决您的问题。

检查下面的更新代码：

*{
    margin:0px;
    padding:0px;
}
header{
    display:block;
    height:100px;
    background-color:blue;
}
nav{
    height:auto;
    width:100%;
}
nav a{
    height:100%;
    text-align:center;
    line-height:100px;
    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>

Answer 3

尝试像我一样使用:Before，因为您的导航高度是固定的，这不会成为问题。

小提琴链接演示

* {
  margin: 0px;
  padding: 0px;
}
header {
  display: block;
  height: 100px;
  background-color: blue;
}
nav {
  height: 100%;
  width: 100%;
  display: table;
}
nav a {
  height: 100%;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  color: black;
  margin-left: 25px;
  font-size: 25px;
  display: table-cell;
  vertical-align: middle;
}
nav a:hover:before {
  background-color: #F3008A;
  postion: absolute;
  width: 50px;
  content: "";
  height: 3px;
  position: absolute;
  z-index: 4;
  top: 64px;
}

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

Answer 4

我断言最好使用 flexbox，因为它是现代且响应迅速的。以下内容将在所有相对现代的浏览器中很好地工作。

nav {
    display: -webkit-flex;
    display: flex;
}
nav > div {
    background-color: pink;
    height: 40px;
    
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-contents: center;
    justify-contents: center;
    -webkit-align-items: center;
    align-items: center;
}
nav > div:nth-child(odd) {
    background-color: red;
}
nav > div > a {
    text-align: center;
    -webkit-flex: 1;
    flex: 1;
}

    <nav>
        <div><a href="google.com">hi</a></div>
        <div><a href="google.com">hi2</a></div>
        <div><a href="google.com">hi3</a></div>
    </nav>

请参阅此 JSFiddle。

这是一个带有图片的有用指南。