Как я могу вертикально выровнять эту кнопку гиперссылки?

0

Я пытаюсь вертикально сосредоточить эти гиперссылки. Тем не менее, я не могу понять, что я оставляю в своем коде 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;
}
Теги:

1 ответ

0
Лучший ответ

Дайте ссылкам высоту строки той же высоты родителя: 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
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню