尝试右对齐时出现图像链接对齐问题

Question

我无法弄清楚如何正确对齐这些图像链接。我现在看起来像这样（我刚才在链接中使用了align="right"）：

我试图让它看起来像这样：

HTML：

<a href="webster.cs.washington.edu/validate-html.php">
  <img src="webster.cs.washington.edu/images/w3c-html.png"; alt="Valid HTML5" align="right" />
</a>
<br /> 
<a href="webster.cs.washington.edu/validate-css.php">
  <img src="webster.cs.washington.edu/images/w3c-css.png"; alt="Valid CSS" align="right" /></a>

Answer 1

您可以尝试纵向对齐而不是对齐

<a href="webster.cs.washington.edu/validate-html.php"><img src="webster.cs.washington.edu/images/w3c-html.png"; alt="Valid HTML5" vertical-align="top" /></a><br />

<a href="webster.cs.washington.edu/validate-css.php"><img src="webster.cs.washington.edu/images/w3c-css.png"; alt="Valid CSS" vertical-align="center" /></a>

这里是JSFiddle

此处有关Vertical-align属性

的更多参考资料

Answer 2

你可以这样做。

a{
  text-decoration:none;
}
img{
  display:block;
  border: 1px solid #333;
}
img:first-child{
  margin-bottom: 2px;
}

<div class="" align="right">
  <a href="webster.cs.washington.edu/validate-html.php">
    <img src="http://www.avatarsdb.com/avatars/bart_roll_eyes.gif" alt="Valid HTML5" />
  </a>
  <a href="webster.cs.washington.edu/validate-css.php">
    <img src="http://www.avatarsdb.com/avatars/bart_roll_eyes.gif" alt="Valid CSS" />
  </a>
</div>

如果您想要内联代码，请使用此功能。

<div class="" align="right">
  <a href="webster.cs.washington.edu/validate-html.php" style="text-decoration:none;">
    <img src="http://www.avatarsdb.com/avatars/bart_roll_eyes.gif" alt="Valid HTML5" style="display:block;border:1px solid #333;">
  </a>
  <br>
  <a href="webster.cs.washington.edu/validate-css.php">
    <img src="http://www.avatarsdb.com/avatars/bart_roll_eyes.gif" alt="Valid CSS" style="display:block;border:1px solid #333;">
  </a>
</div>