Question

我希望文本位于中心，但它们似乎都贴在导航栏的顶部。看到我附上的图片。请告诉我我做错了什么。编辑：我无法附加图片，因为我没有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

使用line-height相同的height将'a'的文字垂直对齐到中心。

在a或a:link, a:visited

上设置样式

a {
   line-height: 30px;
}

jsfiddle demo

Screenshot of centered text

Answer 2

从顶部填充顶部填充：12px的a：link，a：在你的css中访问

已完成

Answer 3

因此您提供了padding:0 the text is sticking to the top。

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

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

小提琴：Text at center

Answer 4

我认为这就是您想要的...只需在padding-top代码中添加anchor即可。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 5

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 6

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

这是工作小提琴：Demo

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

6 个答案: