HTML\CSS 图像对齐

Question

我在使用以下 HTML 代码让我的图像正确对齐时遇到问题:

<a href="Source URL">Photo Name</a><br /><a href="Source URL"><img border="0"    src="Image URL" style="float: left; width: 30%; margin-right: 1%;" title="Photo Name" alt="Photo Name"></a>

<a href="Source URL">Photo Name</a><br /><a href="Source URL"><img border="0" src="Image URL" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" title="Photo Name" alt="Photo Name"></a>

<a href="Source URL">Photo Name</a><br /><a href="Source URL"><img border="0" src="Image URL" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" title="Photo Name" alt="Photo Name"></a>

<p style="clear: both;">

使用上面的方法，我注意到图像和文本似乎“对 Angular 线对齐”，但我不知道如何让它们正确对齐。最终，我试图创建一个包含 9 个带图片链接的 GridView 。

Answer 1

您基本上只需要更加熟悉 HTML 父子概念即可。这是另一个例子

WORKING EXAMPLE

<div class="parent">
  <div class="child">
    <a href="Source URL">Photo Name</a>
    <a href="Source URL"><img border="0" src="http://placehold.it/300" title="Photo Name" alt="Photo Name">
    </a>
   </div>
   <div class="child">
     <a href="Source URL">Photo Name</a>
     <a href="Source URL"><img border="0" src="http://placehold.it/300" title="Photo Name" alt="Photo Name">
    </a>
  </div>
  <div class="child">
      <a href="Source URL">Photo Name</a>
      <a href="Source URL"><img border="0" src="http://placehold.it/300" title="Photo Name" alt="Photo Name">
     </a>
  </div>
</div>

CSS

body{
  width:1170px;
  margin:20px auto;
}
.parent{
   width:100%;
}

.child{
   float: left; 
   width: 30%; 
   margin-right: 1%;
}