【问题标题】:CSS HTML center text in circle [duplicate]圆圈中的CSS HTML中心文本[重复]
【发布时间】:2021-07-22 12:59:35
【问题描述】:

我有一个圆圈,里面有一个数字,我的问题是:如何将数字放在圆圈的中心?

我知道还有其他类似的文章,但它们对我没有帮助。

这是我尝试过的:

.circle{

    border-radius: 50%;
    background-color: #0276FD; 
    border: 12px solid #0276FD;
    color: black;
    background-color: #FFFFFF;
    height: 80px;
    width: 80px;
    text-align: center;   
}

结果如下:

有什么想法吗?

提前致谢。

【问题讨论】:

标签: html css border centering


【解决方案1】:

我会为此使用flexbox

.circle{
    border-radius: 50%;
    background-color: #0276FD; 
    border: 12px solid #0276FD;
    color: black;
    background-color: #FFFFFF;
    height: 80px;
    width: 80px;
    text-align: center;   
    
    display: flex;
    justify-content: center;
    align-items: center;
}
<div class="circle">1</div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-09-16
    • 1970-01-01
    • 2021-12-31
    • 2019-12-15
    • 2021-02-02
    • 1970-01-01
    • 2019-11-21
    相关资源
    最近更新 更多