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