html5 图片与文字中间对齐处于同一行、或者图片与按钮处于同一行

为什么80%的码农都做不了架构师？>>>   

    在日常开发中，经常会使用到图片与文字或图片与按钮对齐。

   

   1.图片与按钮 处于同一行，并居中对齐，长使用的方法如下：

<div>
    <img src=""  style="vertical-align:middle"/>
    <button type="button">按钮</button>
</div>

    使用属性 vertical-algin:middle   使元素的基线与父元素的基线对齐。

以下部分，借鉴于以下bolg: http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html

2.图片与文字处于同一行并居中对齐，也可以使用上面的这种方法，还有一种方法如下：

 a. 大小不固定，单行文字的垂直居中

    单行文字垂