移动端数字与文字上下对齐

最新推荐文章于 2024-10-02 17:15:49 发布

=^_^=银爪

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量70

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_65635437/article/details/130872092

版权

html

<div class="tadayInfo">
<div class="tadayInfo-title">
<img src="./images/centre/今日统计@2x.png" alt="" style="width: 100%;height: 100%;">
 </div>
<div class="tadayInfo-contentBox">
<div class="tadayInfo-content">
 <div class="tadayInfo-number">240</div>
<div class="tadayInfo-tag">转为私客</div>
</div>
 <div class="tadayInfo-content">
 <div class="tadayInfo-number">240</div>
 <div class="tadayInfo-tag">转为私客</div>
</div>
<div class="tadayInfo-content">
<div class="tadayInfo-number">240</div>
 <div class="tadayInfo-tag">转为私客</div>
</div>
 <div class="tadayInfo-content">
<div class="tadayInfo-number">240</div>
<div class="tadayInfo-tag">转为私客</div>
</div>
</div>
</div>

css

.tadayInfo {
        width: 100%;
        height: 100%;
        background-image: linear-gradient(233deg, #5965BF 0%, #536BBC 100%);
        border: 1px solid #ffffff14;
        box-shadow: 0 3px 9px -4px #5D6FBD;
        border-radius: 10px;
        position: relative;
        padding-bottom: 16px;

    }
    .tadayInfo1 {
        width: 100%;
        height: 100%;
        background-image: linear-gradient(233deg, #db379c 0%, #d17db5 100%);
        border: 1px solid #ffffff14;
        box-shadow: 0 3px 9px -4px #d879ad;
        border-radius: 10px;
        position: relative;
        padding-bottom: 16px;

    }

    .tadayInfo-title {
        width: 110px;
        height: 24px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .tadayInfo-contentBox {
        display: flex;
        margin-top: 34px;
        color: #fff;
        font-family: PingFangSC-Regular;
    }

    .tadayInfo-content {
        text-align: center;
        transition: color .1s linear;
        width: 25%;
    }

    .tadayInfo-number {
        font-weight: 600;
        font-size: 20px;
    }

    .tadayInfo-tag {
        font-weight: 400;
        font-size: 12px;
    }