html - css:在 td 顶部对齐跨度

Question

我有一段代码，如下所示，

.RegCurrImage {
    background-color: rgba(0, 51, 102, 0.4) !important;
    line-height: 80px;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: solid 1px #003366;
    text-align: center !important;
}

.RegCurrImage span {
    position: relative;
    color: #003366;
    /*line-height:48px;*/
    font-size: 45px;
}

<table>
    <tbody>
        <tr>
            <td><div class="RegCurrImage"><span>1</span></div></td>
            <td><span>testing</span><span>testing</span></td>
        </tr>
    </tbody>
</table>

我的文字 (testing) 出现在中间我无法顶部对齐，

我想在不更改 RegCurrImage

的 css 的情况下从我的 RegCurrImage div 开始的位置对齐此跨度

喜欢下图

我尝试了 verticle-align:top; 但这也没有帮助

我怎样才能做到这一点？

Answer 1

在 td 上添加 vertical-align:top;

td{vertical-align:top;}
.RegCurrImage {
    background-color: rgba(0, 51, 102, 0.4) !important;
    line-height: 80px;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: solid 1px #003366;
    text-align: center !important;
}

.RegCurrImage span {
    position: relative;
    color: #003366;
    /*line-height:48px;*/
    font-size: 45px;
    
}

<table>
    <tbody>
        <tr>
            <td><div class="RegCurrImage"><span>1</span></div></td>
            <td><span>testing</span><span>testing</span></td>
        </tr>
    </tbody>
</table>