如何降低链接图像

Question

我想将图像稍微移动一点，以使图像旁边的文字位于中间，一切看起来都是对齐的。我试图通过添加填充和边距值来实现这种外观，但无济于事。我博客的网址如下：http://www.blankesque.com

图像的html编码如下：

<b:if cond='data:newerPageUrl'>
  <span id='blog-pager-newer-link'>
  <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Next  <img border='0' height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/0C6ACBDC-DFDC-45F6-9811-E5A8CDFCA8B6_zpsxowcscnl.jpg' width='20px'/></a>
  </span>
</b:if>

<b:if cond='data:olderPageUrl'>
  <span id='blog-pager-older-link'>
  <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img border='0' height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/75D8D238-DBEE-440E-AED5-525720876C13_zpsvhhmbezy.jpg' width='20px'/>  Previous</a>
  </span>
</b:if> 

CSS：

#blog-pager-newer-link {
    float:right;
    margin: 3% 0 3% 0;
}
#blog-pager-older-link {
    float: left;
    margin: 3% 0 3% 0;
}
.blog-pager-older-link {
    font-size: 11px;
    font-family: 'karla', arial;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #333333;
    font-weight: normal!important;
}
.blog-pager-newer-link {
    font-size: 11px;
    font-family: 'karla', arial;
    text-decoration: none;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #333333;
    font-weight: normal!important;
}

Answer 1

将此添加到CSS：

a img{
    margin-top:2px;
}

请注意，最好为此锚点a或此img提供唯一标识符id，以便此CSS不会影响所有 {{ 1}}元素在您的网页中包含锚点img，同时尝试仅针对 此图片进行处理，例如：

a

另请注意，使用a#lil-icon img

包装li是错误的

div

在验证这段代码时从validator.w3.org开始：

  

错误：在此上下文中，元素div不允许作为元素ul的子元素。

要解决此问题，只需将<ul> <div class="homeicon"> <li> <a href="http://www.blankesque.com"><!-- img --></a> </li> </div> <li><a href="http://www.blankesque.com/p/aboutblankesque.html">About</a> </li> <!-- the rest of your li's --> </ul> 放在.homeicon上，将其更改为：

li

Answer 2

你的意思是左上方的小图片，是吗？

您已为该图片添加position: relative;，因此只需将bottom: -2px;添加到图片规则（或您喜欢的任何距离）：

.homeicon a img {
    border: medium none;
    position: relative;
    bottom: -2px;
}