html 带有居中文本的完美响应圆圈

Posted 2021-05-11

time {
    display: inline-block;
    position: relative;
    width: 50%;
    .spacer {
        position: relative;
        padding-top: 100%;
    }
    .outer-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #CCCCCC;
        @include border-radius(100%);
        @include box-sizing(border-box);
        text-align: center;
        &:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            margin-right: -0.25em;
        }
    }
    .inner-container {
        display: inline-block;
        vertical-align: middle;
    }
    p {
        font-family: Arial, Helevetica, sans-serif;
        font-size: 1em;
        margin: 0;
        + p {
            font-size: 0.75em;
            + p {
                font-size: 1em;
            }
        }
    }
}

<time>
    <div class="spacer"></div>
    <div class="outer-container">
        <div class="inner-container">
            <p>22nd</p>
            <p>September</p>
            <p>1991</p>
        </div>
    </div>
</time>