0

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

.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) 出现在中间我无法顶部对齐，

我想从我的RegCurrImagediv 开始的地方对齐这个跨度而不改变 cssRegCurrImage

像下面的图片这个

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

我怎样才能做到这一点？

4

2 回答 2

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>

于 2018-12-27T06:40:12.537 回答
0

用于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>

于 2018-12-27T06:41:09.313 回答