为什么浏览器会这么奇怪的移动线？

Question

我听从这样：

.table{ 
 
    width: 500px; 
 
} 
 
.table td{ 
 
    vertical-align: middle: 
 
} 
 
.logo{ 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
}

<table class="table" border="1"> 
 
    <tr> 
 
     <td> 
 
      <span class="logo"> 
 
       <img src="http://i.imgur.com/8odfqCs.png" alt="" /> 
 
      </span> 
 
      <span>Ололо лололо олололо лололо лолололо лололлололл лолололлл оллолло лоллогллол лололо</span> 
 
     </td> 
 
    </tr> 
 
</table>

为什么第一行通常张贴，并在底部另一个？ 我尝试了不同的“显示器”，“浮动”和“清除”属性，但什么都没有发生

Answer 1

更新使用display: table-cell你可以得到你想要的结果。可能不适用于所有浏览器。

.table{ 
 
    width: 500px; 
 
} 
 
.table td{ 
 
    vertical-align: middle: 
 
} 
 
.table td span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<table class="table" border="1"> 
 
    <tr> 
 
     <td><span class="logo"> 
 
       <img src="http://i.imgur.com/8odfqCs.png" alt="" /> 
 
      </span> 
 
      
 
      <span>Ололо лололо олололо лололо лолололо лололлололл лолололлл оллолло лоллогллол лололо</span> 
 
     </td> 
 
    </tr> 
 
</table>