Question

我正在尝试垂直居中这些超链接。但是，我无法弄清楚我在css代码中遗漏了什么。我错过了什么？

      <tr>
         <td id="nav"><a href="demopage.html">1</a></td>
         <td id="nav"><a href="demopage.html">2</a></td>
         <td id="nav"><a href="demopage.html">3</a></td>
     </tr>
     <tr style="height: 45px">
         <td id="nav"><a href="demopage.html">4</a></td>
         <td id="nav"><a href="demopage.html">5</a></td>
        <td id="nav"><a href="demopage.html">6</a></td>
     </tr>

CSS代码：

#nav a {
text-decoration:none;
display:block;
background-color:#99ccff;
border: 1px solid #000000;
list-style-type: none; margin:0; padding:0;
width: 125px;
height: 25px;
text-align:center;
vertical-align:middle;
margin-top: auto    
       }
#nav a:link {
color:black;
  }
  #nav a:visited {
color:#000000;
 }

#nav a:hover {
color:#000000;
background-color:#EAEAEA;
}

Answer 1

为链接指定与父级相同的行高：JS Fiddle

#nav a {
    text-decoration:none;
    display:block;
    background-color:#99ccff;
    border: 1px solid #000000;
    list-style-type: none;
    margin:0;
    padding:0;
    width: 125px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    margin-top: auto
}

如何垂直对齐此超链接按钮？

1 个答案: