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

您需要为所有内容添加行高

Answer 2

我会使用padding-top。

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

Answer 3

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

编辑：

尝试这种方式：

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

Answer 4

我看到你使用“padding：0px”将你的东西锁定到了左上角。http://www.tizag.com/cssT/padding.php向你展示了如何使用填充。

尝试使用：padding-top：25px;填充底：25像素;填充右：50像素;填充左：50像素;你会看到它已经移动了。

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

4 个答案: