为什么我的文字不在导航栏的块中间？我究竟做错了什么？

Question

我想要中间的文字，但它们似乎都粘在导航栏的顶部。看我附上的图片。请告诉我我做错了什么。 edit:I 无法附加图片，因为我没有 10 个声誉。

body {
  background-color: white;
}
ul {
  list-style-type: none;
}
li {
  float: left;
}
a:link,
a:visited {
  display: block;
  padding: 0;
  width: 200px;
  height: 30px;
  background-color: blue;
  text-decoration: none;
  font-family: arial;
  color: white;
  font-weight: bold;
  text-align: center;
}
a:hover,
a:active {
  background-color: green;
}

<body>
  <ul>
    <li> <a href="#"> Home </a> 
    </li>
    <li> <a href="#"> Products </a> 
    </li>
    <li> <a href="#">  Services </a> 
    </li>
    <li> <a href="#"> Contact us </a> 
    </li>
    <li> <a href="#">  About us </a> 
    </li>
    <li> <a href="#"> Blog </a> 
    </li>
  </ul>
</body>

Answer 1

因为你给了 padding:0 the text is sticking to the top。

所以我改变了两件事，它对我有用。

padding:5px 0px;
height:20px;//To make your `li height 30px`

Fiddle: Text at center

Answer 2

我想这就是你想要的...只需在 anchor 标签中添加一个 padding-top。

body {
  background-color: white;
}
ul {
  list-style-type: none;
}
li {
  float: left;
}
a:link,
a:visited {
  display: block;
  width: 200px;
  height: 30px;
  background-color: blue;
  text-decoration: none;
  font-family: arial;
  color: white;
  font-weight: bold;
  text-align: center;
  padding-top:12px;
}
a:hover,
a:active {
  background-color: green;
}

<body>
  <ul>
    <li> <a href="#"> Home </a> 
    </li>
    <li> <a href="#"> Products </a> 
    </li>
    <li> <a href="#">  Services </a> 
    </li>
    <li> <a href="#"> Contact us </a> 
    </li>
    <li> <a href="#">  About us </a> 
    </li>
    <li> <a href="#"> Blog </a> 
    </li>
  </ul>
</body>

Answer 3

使用 line-height 同样有 height 将 'a' 的文本垂直居中对齐。

在 a 或 a:link, a:visited

上设置样式

a {
   line-height: 30px;
}

jsfiddle demo

Answer 4

add line height to a tag 

<style>
    body {
  background-color: white;
}
ul {
  list-style-type: none;
}
li {
  float: left;
}
a:link,
a:visited {
  display: block;
  padding: 0;
  width: 200px;
  height: 30px;
  line-height: 30px;
  background-color: blue;
  text-decoration: none;
  font-family: arial;
  color: white;
  font-weight: bold;
  text-align: center;
}
a:hover,
a:active {
  background-color: green;
}
</style>

Answer 5

添加padding-top:10px; in a:link, a:visited

这里正在工作 fiddle :Demo

Answer 6

从你的 css

中的 a:link、a:visited 的顶部 padding-top:12px 开始填充

完成了

为什么我的文字不在导航栏的块中间？我究竟做错了什么？

Why is my text not in middle of the blocks on nav bar? What am I doing wrong?

html

css