调整菜单中文字的垂直位置

Question

我试图建立一个基本的悬停菜单与空白的背景图像和文本。

我已经创建了两个图像与正常和悬停状态，并为文本的代码是在一个表一行和多个td的。这是一个例子:

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

问题是，虽然所有这些工作很好我的文本对齐到顶部，我无法改变它的位置

我已经尝试了所有可能的技巧，使用了vertical-align属性，但似乎不起作用。

有谁能帮我一下吗?

Answer 1

您需要为所有内容添加line-height

Answer 2

我会用padding-top。

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

Answer 3

我看到你使用"padding:0px"来锁定你的东西到左上角。http://www.tizag.com/cssT/padding.php告诉你如何使用padding。

尝试使用:padding-top:25px;padding-bottom: 25 px;padding-right: 50 px;padding-left: 50 px;你会看到它已经移动了

Answer 4

也许您应该使用li元素的padding-top属性，尝试添加padding-top: 10px之类的东西。如果它与底部边框对齐，则将相同的值添加到元素的padding-bottom属性。

编辑:

试试这样:

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