HTML\CSS图像对齐

我在使用以下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;">

使用上面的方法，我注意到图像和文本看起来是“对角对齐”的，我不知道如何使它们正确对齐。最终，我尝试创建一个包含9个图片链接的网格视图。

Exmaple:

HTML

<div class="wrapper">
  <div class="img">
    // here comes image1 and details
  </div>
  <div class="img">
    // here comes image2 and details
  </div>
  <div class="img">
    // here comes image3 and details
  </div>
</div>

这个怎么样？

---

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

---

一旦你需要有效的HTML5标记，然后CSS样式。现代flex和即将推出的网格系统可以在图像对齐方面帮助您很多

这里是一个小方法

@导入url(https://fonts.googleapis.com/css?family=Open+Sans）；
@导入url（//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css）；
身体{
字体系列：“开放式Sans”，无衬线；
背景：#eee；
}
a{
颜色：#ab308a；
文字装饰：无；
}
a:悬停{
文字装饰：下划线；
}
.主集装箱{
最大宽度：1000px；
保证金：1rem自动；
边框：1px实心#ddd；
填充：1rem；
背景：#fff；
}
.视频{
位置：相对位置；
}
.视频：之后{
位置：绝对位置；
左：0.5雷姆；
底部：0.5雷姆；
字体系列：“FontAwesome”；
内容：“\f144”；
字体大小：30px；
颜色：白色；
}
.imageWrapper:悬停{
不透明度：0.7；
}
.columncontrol2>div{
-webkit柔性包装：包装；
柔性包装：包装；
}
.columncontrol2>div>div{
保证金：0.01雷姆0；
显示：-webkit flex；
显示器：flex；
}
.columncontrol2>div>div.imageSection{
宽度：30%；
右边填充：20px；
}
.columncontrol2>div>div.imageSection.imageWrapper{
显示：块；
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
填充顶部：100%；
}
.columncontrol2>div>div.imageSection img{
显示：无；
}
.columncontrol2>div>div.textSection{
宽度：70%；
}
.columncontrol2>div>div.text节h3{
字体大小：0.9rem；
保证金：0；
字体大小：正常；
}
@媒体屏幕和屏幕（最小宽度：600px）{
.columncontrol2.第3行Column_33_33_33，
.columncontrol2.Row4列25_25_25_25，
.column控件2.row5列\u 20\u 20\u 20\u 20{
显示：-webkit flex；
显示器：flex；
保证金：0；
}
.columncontrol2.第3行Column_33_33>div，
.columncontrol2.Row4 Column_25_25_25>div，
.columncontrol2.row5列20_20_20_20>div{
-webkit柔性方向：列；
弯曲方向：立柱；
}
.columncontrol2.Row3 Column_33_33>div.imageSection，
.columncontrol2.row3列\u 33\u 33>div.text节，
.columncontrol2.Row4 Column_25_25_25_25>分区图像部分，
.columncontrol2.Row4 Column_25_25_25_25>分区文本部分，
.columncontrol2.Row5 Column_20_20_20_20>div.imageSection，
.columncontrol2.Row5列20_20_20_20>div.textSection{
填充：0；
保证金：0；
宽度：80%；
}
.columncontrol2.row3列\u 33\u 33>div{
-webkit flex:0.33.33333%；
弹性：0.33.33333%；
}
.columncontrol2.row3列\u 33\u 33>div:n类型（3n+2）{
-webkit对齐项目：居中；
对齐项目：居中；
}
.columncontrol2.Row3 Column_33_33>div:n类型（3n+3）{
-webkit对齐项目：柔性端；
对齐项目：柔性端；
}
.columncontrol2.row4列\u 25\u 25\u 25>div{
-webkit flex:0.25%；
弹性：0.25%；
}
.columncontrol2.Row4 Column_25_25_25_25>div:n类型（4n+2）。imageSection，
.columncontrol2.Row4列\u 25\u 25\u 25>div:n类型（4n+2）。textSection{
左边缘：-7%；
}
.columncontrol2.Row4 Column_25_25_25_25>div:n类型（4n+3）。imageSection，
.columncontrol2.Row4列\u 25\u 25\u 25>div:n类型（4n+3）。textSection{
保证金权利：-7%；
}
.columncontrol2.Row4 Column_25_25_25_25>div:n类型（4n+2），
.columncontrol2.Row4列\u 25\u 25\u 25>div:n类型（4n+3）{
-webkit对齐项目：居中；
对齐项目：居中；
}
.columncontrol2.Row4列\u 25\u 25\u 25>div:n类型（4n+4）{
-webkit对齐项目：柔性端；
对齐项目：柔性端；
}
.columncontrol2.row5列20_20_20_20>div{
-webkit-flex:020%；
弹性：0.20%；
}
.columncontrol2.Row5列20_20_20_20_20>分区：第n个类型（5n+2）。imageSection，
.columncontrol2.row5列20_20_20_20>div:n类型（5n+2）。textSection{
左边缘：-6%；
}
.columncontrol2.row5列20_20_20_20_20>div:n类型（5n+4）。图像部分，
.columncontrol2.row5列\u 20\u 20\u 20\u 20>div:n类型（5n+4）。textSection{
保证金权利：-6%；
}
.columncontrol2.row5列20_20_20_20_20>div:n类型（5n+2），
.columncontrol2.Row5列20_20_20_20>div:n类型（5n+3），
.columncontrol2.row5列\u 20\u 20\u 20\u 20>div:n类型（5n+4）{
-webkit对齐项目：居中；
对齐项目：居中；
}
.columncontrol2.row5列\u 20\u 20\u 20\u 20>分区：第n个类型（5n+5）{
-webkit对齐项目：柔性端；
对齐项目：柔性端；
}
}

调整视口大小以查看效果
三列
四列
五列
.img{
  float: left;
  width: 33.33%;
}
.wrapper{
   float: left;
   width: 100%;
}

<div>
    <div class="img">
        <a href="Source URL">Photo Name</a>
        <br/>
        <a href="Source URL">
            <img src="sourceImg"/>
        </a>
    </div>
    
    <div class="img">
        <a href="Source URL">Photo Name</a>
        <br/>
        <a href="Source URL">
            <img src="sourceImg"/>
        </a>
    </div>
    <div class="img">
        <a href="Source URL">Photo Name</a>
        <br/>
        <a href="Source URL">
            <img src="sourceImg"/>
        </a>
    </div>
</div>
<p style="clear: both;" />

.img {
    float:left;
}

<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>

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

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