這個問題說起來有點慚愧，搞了很久才搞定。
本人并不擅長CSS，至少在布局這塊到現在還是一片糊涂。
不知道是不是對android布局太了解了，還是其他什么原因，我總是在html+css中想著采用android中的線性布局啊，相對布局啊什么的。
可是，一個很簡單的布局都搞不定。

具體看圖：




很簡單的一個布局，看出問題了嗎？文字需要垂直居中怎么辦？
這個圖對應的基本html如下：

    <div class="btn_blue" onclick="">
							
	<img src="img/facebook_login.png" style="width:40px;height:40px;"><span>Login with Facebook</span>
							 
</div>

  

這個問題我先后采用了vertical-align:middle;height:50px;line-height:50px;等這種方法都沒能很好的解決。直到我采用了如下方法：

    <div class="btn_blue" onclick="">
	<span style="vertical-align:middle;display:inline-block; background:url(img/facebook_login.png) top left no-repeat; width:40px; height:40px;"></span>
	<span style="vertical-align:middle;margin-left:32px;">Login with Facebook</span>
</div>
  

我發現使用html+css布局的時候，非常的糟糕，html可以布局但很弱，css也可以布局但難以理解，兩者混用又很亂。
在這一點上android就顯得非常“先進”，很容易讓人理解，一看圖片就基本能斷定采用什么布局；相反，使用html+css就不能馬上判斷出他是什么結構，如何對齊，必須在瀏覽器中試過才知道，有時候一個簡單的效果要寫很多CSS，還要和具體的html元素關聯起來，很不通用，所以，我認為html+css是一種很糟糕的技術，否則也不會產生那么多JS框架，CSS框架了。
拙見 諒解

CSS將圖片和文字垂直居中