如何将 DIV 元素向顶部移动一点

Question

我为悬停导航栏编码的 home-link 图像有问题。我的博客URL如下：http://www.blankesque.com。理想情况下，我希望图像与旁边的选项卡文本对齐，但是无论我做什么，我似乎都无法将 "home" 图标稍微向上移动。我试图尝试使用填充和边距值，但无济于事。我只需要将图像向顶部移动大约 15 像素，但我不知道该怎么做。我在下面包含了 html 和 css 编码：

#wctopdropcont { 
width:100%;
height:45px;
display:block;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position:fixed;

background:#f8f8f8;
opacity: 0.9;
filter: alpha(opacity=90);
 }
</style>

<div id='wctopdropcont'>

<ul>
<li><a href='http://www.blankesque.com'><img alt='Home' height='30px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/520FDB25-EAD9-4BB0-B621-B1BFE3B558A9_zpsua6eoor2.gif' width='30px'/></a></li> 
</ul></div>

Answer 1

一个快速破解可能是这样的：

将以下内容添加到您的主页图标中属性:

margin: -10px;

但是，为了让您的 css 更易于维护，我建议找出图像未正确对齐的原因。为此，您可以使用 Chrome 开发人员工具或 Firebug.

等浏览器工具

当您检查主页按钮时，您会看到

添加了 5 px 的填充，因为您在 #wctopdropnav li a, #wctopdropnav li 中定义了它 a:link
您在#wctopdropnav li 中定义的填充

为了正确解决这个问题，请重新考虑设置菜单样式的方式，以便您的文本链接有一些填充，但图像没有。

Answer 2

这是因为原生的 ul 和 li margin/padding。您可以专门为 img 使用负上边距。

#wctopdropnav ul li a img {margin-top:-13px;}

如果您要在顶部导航中添加更多 img，您可以将 class/id 添加到主页图标图像，并将 CSS 专门添加到 class。

Answer 3

大部分问题是因为 #wctopdropnav li 有这个：

padding:10px 6.5px 6.5px 6.5px

padding 将宽度和高度添加到原始元素的宽度和高度，这在文本链接中没有造成问题，因为它没有那么多，但是对于图像它就成了问题

删除填充 li 项，并给出 #wctopdropnav li a

line-height:35px;

问题已解决！

Answer 4

不要使用任何边距之类的东西。

问题是你的 img 上有填充。

设置填充：0；只到第一里就好了..

#wctopdropnav li:first-child { padding: 0; }

如何将 DIV 元素向顶部移动一点

How To Move A DIV Element A Little Towards The Top

html

css

blogger