为什么浏览器如此奇怪的移动线?

时间:2015-06-27 17:53:31

标签: html css

Realy

我注意到这一点:I need this

.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>

为什么第一行正常发布,另一行发布在底部? 我尝试了不同的“显示”,“浮动”和“清除”属性,但没有发生任何事情

1 个答案:

答案 0 :(得分:0)

更新使用display: table-cell,您可以获得所需的结果。但是可能无法在所有浏览器中使用。

&#13;
&#13;
.table{
    width: 500px;
}
.table td{
    vertical-align: middle:
}
.table td span {
    display: table-cell;
    vertical-align: middle;
 }
&#13;
<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>
&#13;
&#13;
&#13;