SOURCE

<p style="color:red;font-size:15px;font-weight:bold;">demo1</p>
<div style="margin-bottom:10px;background-color:#e5edff;line-height:0;">
  <img src="http://photo1-1253196505.cosgz.myqcloud.com/photo/%E5%A3%81%E7%BA%B82.png?sign=9PuG48QB1YZADVh1LGgiL+6gMTRhPTEyNTMxOTY1MDUmaz1BS0lESFVaUzkwUU5CZjRRbjlFdjA3QktPV2RueXZ6c2F3blcmZT0xNDk0MzE5Nzk0JnQ9MTQ5MTcyNzc5NCZyPTEwNjE3MDE2ODkmZj0vcGhvdG8vJUU1JUEzJTgxJUU3JUJBJUI4Mi5wbmcmYj1waG90bzE=">
  demo1
</div>
<p style="color:red;font-size:15px;font-weight:bold;">demo2</p>
<div style="text-align: justify;width:300px;background-color:#e5edff;line-height:0;vertical-align: top;">
  <img src="http://photo1-1253196505.cosgz.myqcloud.com/photo/%E5%A3%81%E7%BA%B82.png?sign=9PuG48QB1YZADVh1LGgiL+6gMTRhPTEyNTMxOTY1MDUmaz1BS0lESFVaUzkwUU5CZjRRbjlFdjA3QktPV2RueXZ6c2F3blcmZT0xNDk0MzE5Nzk0JnQ9MTQ5MTcyNzc5NCZyPTEwNjE3MDE2ODkmZj0vcGhvdG8vJUU1JUEzJTgxJUU3JUJBJUI4Mi5wbmcmYj1waG90bzE=">
  <img src="http://photo1-1253196505.cosgz.myqcloud.com/photo/%E5%A3%81%E7%BA%B82.png?sign=9PuG48QB1YZADVh1LGgiL+6gMTRhPTEyNTMxOTY1MDUmaz1BS0lESFVaUzkwUU5CZjRRbjlFdjA3QktPV2RueXZ6c2F3blcmZT0xNDk0MzE5Nzk0JnQ9MTQ5MTcyNzc5NCZyPTEwNjE3MDE2ODkmZj0vcGhvdG8vJUU1JUEzJTgxJUU3JUJBJUI4Mi5wbmcmYj1waG90bzE=">
  <img src="http://photo1-1253196505.cosgz.myqcloud.com/photo/%E5%A3%81%E7%BA%B82.png?sign=9PuG48QB1YZADVh1LGgiL+6gMTRhPTEyNTMxOTY1MDUmaz1BS0lESFVaUzkwUU5CZjRRbjlFdjA3QktPV2RueXZ6c2F3blcmZT0xNDk0MzE5Nzk0JnQ9MTQ5MTcyNzc5NCZyPTEwNjE3MDE2ODkmZj0vcGhvdG8vJUU1JUEzJTgxJUU3JUJBJUI4Mi5wbmcmYj1waG90bzE=">
  <img src="http://photo1-1253196505.cosgz.myqcloud.com/photo/%E5%A3%81%E7%BA%B82.png?sign=9PuG48QB1YZADVh1LGgiL+6gMTRhPTEyNTMxOTY1MDUmaz1BS0lESFVaUzkwUU5CZjRRbjlFdjA3QktPV2RueXZ6c2F3blcmZT0xNDk0MzE5Nzk0JnQ9MTQ5MTcyNzc5NCZyPTEwNjE3MDE2ODkmZj0vcGhvdG8vJUU1JUEzJTgxJUU3JUJBJUI4Mi5wbmcmYj1waG90bzE=">
  <img src="http://photo1-1253196505.cosgz.myqcloud.com/photo/%E5%A3%81%E7%BA%B82.png?sign=9PuG48QB1YZADVh1LGgiL+6gMTRhPTEyNTMxOTY1MDUmaz1BS0lESFVaUzkwUU5CZjRRbjlFdjA3QktPV2RueXZ6c2F3blcmZT0xNDk0MzE5Nzk0JnQ9MTQ5MTcyNzc5NCZyPTEwNjE3MDE2ODkmZj0vcGhvdG8vJUU1JUEzJTgxJUU3JUJBJUI4Mi5wbmcmYj1waG90bzE=">
  <i class="justify-fix">
  </i>
  <i class="justify-fix">
  </i>
  <i class="justify-fix">
  </i>
</div>
<p>
  问题：如结果所示，第一行竖直方向上似乎没有取消baseline，第二行的似乎取消了baseline，所以看起来两行的图片没有对齐
</p>
<p style="color:red;font-size:15px;font-weight:bold;">demo3</p>
<div style="display:inline-block;width:100px;height:100px;border:1px solid #000;background:gray;">
</div>
<div style="display:inline-block;width:100px;height:100px;border:1px solid #000;background:gray;">
  <span style="color:red">
    look here
  </span>
</div>

img{
  width:90px;
  height:90px;
}
.pic_box {
  width: 300px;
  height: 300px;
  background-color: #beceeb;
  font-size: 0;
  *font-size: 200px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}

.pic_box img {
  vertical-align: middle;
  vertical-align: middle;
}

.pic_box:after {}