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

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

   

   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. 大小不固定，单行文字的垂直居中

    单行文字垂直居中，使用line-height，将line-height值与外部标签盒子的高度设置成一致便可。；

b.多行文字

   当不肯定文字有几行的状况下，如何实现垂直居中对齐勒？ 其实最简单的方法是讲文字封装起来，把文字当作图片来处理，用<span>标签将全部文字封装起来。代码以下：

<div style="display: table-cell; width:550px;height:1.14em; padding:0 0.1em;border: 4px solid #beceeb; color: #069; font-size: 10em;">
<span style="display:inline-block; font-size: 0.1em; vertical-align: middle;">单行文字居中测试单行文字居中测试单行文字居中测试单行文字居中测试单行文字居中测试 </span>
</div>

  

3. 大小不固定，图片垂直居中

    a. 透明图片 + 背景定位

    使用background-position:center 实现图片居中显示。  使用一个透明的gif图片作覆盖层，高宽拉伸至所需大小，而后设置背景图居中的属性，

   html代码以下：

<ul  class="am-u-md-3">
    <li>
	<img src="img/tm.png" style="background-image: url(img/fj.jpg);"/>
    </li>
</ul>

    CSS 代码以下：

.am-u-md-3 li{
	width:400px;
	height:300px;
	padding:10px;
	margin: 0 10px;
	font-size: 100px;
	float: left;
	border:1px solid #beceeb;
	list-style:none;
}

.am-u-md-3 li img{
	display: block;
	width:100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

   使用该方法的时候，必定要设置list-style 为none， 不然图片就不是垂直居中的。

  b. display:table-cell 和文字大小控制居中

<ul  class="am-u-md-3">
    <li>
	<div>
	    <img src="img/fj.jpg"/>
	</div>				
</li>

CSS 代码

.am-u-md-3 li{
	
	float: left;
	margin-right: 13px;
	list-style: none;
}

.am-u-md-3 li div{
	display: table-cell;
	width:400px;
	height: 250px;
	border:1px solid #beceeb;
	font-size：118px;
	text-align: center;
	vertical-align: middle;
}

.am-u-md-3 li img{
	vertical-align: middle;
}