Регулировка вертикального положения текста в меню

Question

Я пытаюсь создать базовое меню при наведении курсора с пустыми фоновыми изображениями и текстом.

Я создал два изображения с нормальным и наведенным состояниями, и для текста код находится в таблице с одной строкой и несколькими тд. Это пример одного:

                            <td align="center">
                            <div id=menu>
                               <ul style="padding:0px;">
                                 <li><a href="#">WHO WE ARE</a></li>
                               </ul>
                            </div>

У меня работает CSS для управления изменением цвета и фона при наведении.

#menu ul li{
font-family:Arial, Helvetica, sans-serif;
font-weight:700;
font-size:14px;
color:#666;
display:block;
background-image:url(resource/try.gif);
height:35px;
background-repeat:no-repeat;
width:186px;
}

#menu ul li a:hover{
font-family:Arial, Helvetica, sans-serif;
font-weight:700;
font-size:14px;
color:#FFF;
display:block;
background-image:url(resource/try2.gif);
height:35px;
background-repeat:no-repeat;
width:186px;
}

#menu ul li a:visited{
text-decoration:none;
color:#666;
}

Проблема в том, что, хотя все это работает нормально, мой текст выровнен по верху, и я не могу изменить его положение

Я перепробовал все возможные приемы, работал со свойством вертикального выравнивания, но, похоже, он не работает.

Может ли кто-нибудь помочь мне с этим, пожалуйста?

Заранее спасибо.

Answer 1

вам нужно добавить высоту строки для всего

Answer 2

Я вижу, что вы используете "padding: 0px", который фиксирует ваши вещи в верхнем левом углу. http://www.tizag.com/cssT/padding.php показывает, как использовать заполнение.

попробуйте использовать: padding-top: 25px;обивка-дно: 25px;обивка-направо: 50px;обивка налево: 50px;вы увидите, что он сдвинулся.

Answer 3

Возможно, вам следует поработать со свойством padding-top вашего элемента li, попробуйте добавить что-то вроде padding-top: 10px. Если он выравнивается по нижней границе, добавьте то же значение в свойство padding-bottom элемента.

EDIT:

Попробуйте так:

#menu ul li {
 ...your attributes...
 vertical-align: middle;
 line-height: 35px;
}

Answer 4

Я бы использовал padding-top.

http://www.w3schools.com/css/css_padding.asp