CSS将图片和文字垂直居中

这个问题说起来有点惭愧，搞了很久才搞定。
本人并不擅长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框架了。
拙见 谅解