css：在td顶部对齐跨度

Question

我有一段类似于下面的代码，

if let selectedRange = textField.selectedTextRange {
    let firstCharacterPosition = textField.offset(from:textField.beginningOfDocument,to:selectedRange.start) 
}

.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 div的起始位置开始对齐该跨度，而不更改RegCurrImage的css

就像下面的图片

我尝试了RegCurrImage，但这也没有帮助

我该如何实现？

Answer 1

在vertical-align:top;上添加td

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>

Answer 2

使用display:flex来秒td

.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;
}
td:nth-child(2){
    display: flex;
    }

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

或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;
    }
    td:nth-child(2){
          vertical-align: top;
}

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