css - 为什么 <a> 会改变图像的对齐方式

Question

能否请您通过以下链接查看我的网站，并告诉我为什么链接标记更改对齐方式？在添加链接标签之前，所有图片都水平和垂直对齐，但现在第二张图片看起来对齐得更低!

Here is the link

代码如下:

enter code here
<!-- wrapper -->
<div class="wrapper">
<!-- content -->
<div class="clearfix" id="items">
<a href="http://ghazalphoto.com/?page_id=285">
<div class="boxlist">
<img class="aligncenter size-full wp-image-253" alt="imgPortf_1" src="http://ghazalphoto.com/wp-content/uploads/2013/01/imgWedd_1.jpg" />
<h2>Love</h2>
</div>
</a>
<a href="http://ghazalphoto.com/?page_id=285">
<div class="boxlist">
<img class="aligncenter size-full wp-image-258" alt="imgPortf_2"    src="http://ghazalphoto.com/wp-content/uploads/2013/01/imgWedd_2.jpg" />
<h2>Beauty</h2>
</div>
</a>
<a href="http://ghazalphoto.com/?page_id=186">
<div class="boxlist">
<img class="aligncenter size-full wp-image-259" alt="imgPortf_3"  src="http://ghazalphoto.com/wp-content/uploads/2013/01/imgWedd_4.jpg" />
<h2>Fun</h2>
</div>
</a>
<a href="http://ghazalphoto.com/?page_id=290">
<div class="boxlist">
<img class="aligncenter size-full wp-image-259" alt="imgPortf_3" src="http://ghazalphoto.com/wp-content/uploads/2013/01/imgWedd_3.jpg" />
<h2>Favorite</h2>
</div>
</a>
</div>
<!-- End of content -->
</div>
<!-- End of wrapper -->

Answer 1

问题是由 p 标签的位置引起的。

<p><a href="http://ghazalphoto.com/?page_id=276"></a><br>
<a href="http://ghazalphoto.com/?page_id=292"></a></p>

如果删除它，则对齐是正确的。您也可以将它移到包装器 div 之后来解决问题...

<div class="wrapper">
    <p><a href="http://ghazalphoto.com/?page_id=276"></a><br>
    <a href="http://ghazalphoto.com/?page_id=292"></a></p>
    ...

更新

从技术上讲，您确实有 p 标签，因为您在 HTML 中犯了一个小错误...

<a href="http://ghazalphoto.com/?page_id=276"></p>

在这一行中，您关闭了一个 p 标记，即使您从未打开过标记，因此浏览器会尝试猜测您的意思。

如果您在 Firebug(在 Firefox 中)中检查，您会看到这将链接包装在一个段落中 - 这样您就可以看到拼写错误的影响。