图像未对齐 - 怎么了？答案

【问题标题】：Images Not Aligned - What's Wrong?图像未对齐 - 怎么了？
【发布时间】：2016-11-03 10:00:29
【问题描述】：

我不知道是什么导致了这个page 中第三行的图像错位。以下是代码（仅适用于第 3 行）：

<div class="one-fourth" style="float:left;">
<center><a href="/criminal-law/case-studies/fraud-dishonesty-theft-offences"><img src="/wp-content/uploads/2013/10/fraud-theft-case-studies-150x150.jpg" alt="fraud &amp; theft case studies" width="150" height="150" /></a>
<h5><a title="Fraud Dishonesty Theft Case Studies" href="/criminal-law/case-studies/fraud-dishonesty-theft-offences">Fraud, Theft & Dishonesty</h5></center>
</div>

<div class="one-fourth" style="float:left;">
<center><a href="/criminal-law/case-studies/murder-manslaughter-offences"><img src="/wp-content/uploads/2013/10/murder-manslaughter-case-studies-150x150.jpg" alt="murder &amp; manslaughter case studies" width="150" height="150" /></a>
<h5><a title="Murder &amp; Manslaughter Case Studies" href="/criminal-law/case-studies/murder-manslaughter-offences">Murder
Manslaughter</a></h5></center>
</div>

<div class="one-fourth" style="float:left;">
<center><a href="/criminal-law/case-studies/perjury-offences"><img src="/wp-content/uploads/2013/10/perjury-case-studies-150x150.jpg" alt="perjury case studies" width="150" height="150" /></a>
<h5><a title="Perjury Case Studies" href="/criminal-law/case-studies/perjury-offences">Perjury
Offences</a></h5></center>
</div>

我已经第 n 次浏览了这些代码，但我没有发现任何问题。

有人能解释一下吗？

【问题讨论】：

标签： image alignment css-float

【解决方案1】：

您忘记关闭 <a> 标记。

在第一项的第三行中，您拥有：

Fraud, Theft & Dishonesty</h5>

应该是：

Fraud, Theft & Dishonesty</a></h5>

【讨论】：

你是对的！！！那肯定成功了。我现在很想惩罚我的眼睛（认为我已经一遍又一遍地运行代码！）。非常感谢！

【解决方案2】：

好的，你有东西在那里：

<a title="Fraud Dishonesty Theft Case Studies" href="/criminal-law/case-studies/fraud-dishonesty-theft-offences">

该元素的底部边距为 5px。如果你去掉这 5 个像素，你可能会得到对齐的东西！

【讨论】：

它们实际上都具有相同的边距底部，因此不应使该部分错位。总之，总算知道哪里不对了。还是谢谢。