css - 在两个相邻的 div block 中对齐具有不同字体大小的文本

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>

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

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

Answer 1

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

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

Jsfiddle