前端对齐方案总结

字体图标和input输入框左右对齐

//对齐的核心要素是要给字体图标添加vertical-align:middle，改变它的对齐方式
<div class="wrap">
     <i class="iconfont" style='vertical-align:middle'>&#xe625;</i>
     <input type="text" placeholder="我要对齐" class='input'>
</div>

文字和图片左右对齐

//给图片添加vertical-align:middle，改变图片的对齐方式
<div class='box'>
     <span>我是图片的说明文字</span>
     <img style='vertical-align:middle' src="https://cdn.720.jpg"  >
</div>

多行文字居中对齐效果

//必须嵌套两层容器，外层容器申明table，内层申明table-cell
<div  style="height:200px;text-align:center;display: table;border:1px solid red">
    <div style="display: table-cell;vertical-align:middle;">
      我是第一行<br/>
      我是第二行，我比较多
     </div>
</div>