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

Question

<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 或样式属性，使这两段文本对齐到底部？

Answer 1

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

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

Jsfiddle

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

Align the text with differing fontsizes in two adjacent div blocks

html

css

fonts

font-size