下面的两个<span>为什么不能垂直对齐呢？

<div>

  <span style="color:#185E8F;  padding:0; margin:0; font-size:20px;">请选择班级</span>

  <span style="color:#FFFFFF; font-family:'宋体';background-color:#00A8F1; font-size:14px; padding:4px;">添加班级 +</span>

</div>

效果：


请问该如何将他们对齐呢？
------解决方案--------------------
上下对齐，两个span间加上   <br />
------解决方案--------------------



<div>   <span style="color:#185E8F;  padding:0; margin:0; font-size:20px;">请选择班级</span> </br>  <span style="color:#FFFFFF; font-family:'宋体';background-color:#00A8F1; font-size:14px; padding:4px;">添加班级 +</span> </div> 

或者都用div
<div>   <div style="color:#185E8F;  padding:0; margin:0; font-size:20px;">请选择班级</div>   <div style="color:#FFFFFF; font-family:'宋体';background-color:#00A8F1; font-size:14px; padding:4px;">添加班级 +</div> </div> 

------解决方案--------------------
设置两个span的line-height为容器高度试试
------解决方案--------------------
vertical-align:middle;
------解决方案--------------------
<div>   
<span style="color:#185E8F;  padding:0; margin:0; font-size:20px; height:100px; line-height:100px;">请选择班级</span>   
<span style="color:#FFFFFF; font-family:'宋体';background-color:#00A8F1; font-size:14px; height:100px; line-height:100px;padding:0; margin:0;">添加班级 +</span> 
</div>
------解决方案--------------------
<div>
        <span style="color: #185E8F; padding: 0; margin: 0; font-size: 20px; vertical-align: middle;">
            请选择班级</span> <span style="color: #FFFFFF; font-family: '宋体'; background-color: #00A8F1;
                font-size: 14px; padding: 4px; vertical-align: middle;">添加班级 +</span>
    </div>
------解决方案--------------------
试了一下，在两个span上加vertical-align:middle