将两个相邻 div 块中不同字体大小的文本对齐

Question

我有以下代码：http://jsfiddle.net/eNzjZ/81/

<style>
.bigLabel {    
   font-size: 128px;    
}

.smallLabel {    
   font-size: 64px;    
}

</style>
<div>
    <div style="position: absolute; left: 0px; top: 0px; width: 102px; height: 170px; z-index: 216614; overflow: visible; cursor: default;">
        <div>
            <table cellspacing="0" cellpadding="0" width="102px" height="170px">
                <tbody>
                    <tr>
                        <td class="bigLabel" style="padding:0px;background-color:yellow;" align="bottom" valign="bottom">T32</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div style="position: absolute; left: 210px; top: 0px; width: 400px; height: 170px; z-index: 216632; overflow: visible; cursor: default;">
        <div>
            <table cellspacing="0" cellpadding="0" width="400px" height="170px">
                <tbody>
                    <tr>
                        <td class="smallLabel" style="padding:0px;background-color:orange;" align="bottom" valign="bottom">T0.00 0.00</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

问题是两个块中文本的底部没有对齐。 大字体比小字体高。

有没有可能，只改变css或者style属性，让这两段文字底部对齐？

Answer 1

您可以为具有较大字体大小的文本添加行高。

<td class="bigLabel" style="padding:0px;background-color:yellow; line-height: 115px;" align="bottom" valign="bottom">T32</td>

Jsfiddle