如何在文本下略微对齐图像

时间:2012-11-13 17:30:40

标签: html css image

我有一个导航栏。水平。

我左边有一张图片。右边的文字。显示如下:

Not how I want it

我想拍摄图像,使其位于文本下方略微位置,因此基本上图像需要在文本的左侧部分下滑一点点。如下所示:

How I want it

我目前的HTML是:

<p class="menu_text">
    <img class="tgss_icon" src="http://www.thegoldservicescholarship.co.uk/images/icon.jpg" alt="TGSS Icon"/>
    <a class="menu_links" href="contact_us.php">Contact Us</a>
</p>​

我目前的CSS是:

img.tgss_icon{
  height: 30px;
  width: 35px;
  padding-bottom: 7px;
}

a.menu_links:link { color: #58595B; text-decoration: none;}
a.menu_links:visited  { color: #58595B; text-decoration: none; }
a.menu_links:active { color: #E6BD13; text-decoration: none; }
a.menu_links:hover  { color: #E6BD13; text-decoration: none; }

p.menu_text{
  font-size: 15pt;
  /*color: #58595B;*/
}​

提前致谢!克里斯。

1 个答案:

答案 0 :(得分:3)

您可以在链接上以负边距执行此操作。

a.menu_links { margin-left: -20px; }

Demo