使用css在一個圓圈中間對齊文本

-2

我試圖用下面的腳本將圓圈中間的文本對齊，但似乎無法使其在水平和垂直方向中間對齊。使用css在一個圓圈中間對齊文本

.circle { 
 
    background: rgba(72, 156, 234, 1); 
 
    background: -moz-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%); 
 
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(72, 156, 234, 1)), color-stop(100%, rgba(31, 123, 229, 1))); 
 
    background: -webkit-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%); 
 
    background: -o-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%); 
 
    background: -ms-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%); 
 
    background: linear-gradient(to right, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#489cea', endColorstr='#1f7be5', GradientType=1); 
 
    border-radius: 50%; 
 
    height: 80px; 
 
    width: 80px; 
 
    position: relative; 
 
    box-shadow: 0 0 0 5px #F1F1F1; 
 
    margin: 10px; 
 
    color: #6F0; 
 
    vertical-align: middle; 
 
} 
 

 
.text_circle { 
 
    font-size: 36px; 
 
    margin-bottom: 50px; 
 
    vertical-align: middle; 
 
}

<div align="center" class="circle"> 
 
    <span class="text_circle">5</span> 
 
</div>

來源

2017-06-21 user6579134

無論它是一個圓形還是一個矩形都沒關係..自互聯網曙光以來，這已經被無數次詢問了，請谷歌。 – vsync

使用'line-height'與'height'相同使其位於中間 – vsync

@Nick如果您要在代碼中提供答案，您的答案需要在此處發佈，而不是第三方網站那可能會在明天改變或消失。其次，代碼只是答案只是扔他一條魚，而不是教他如何釣魚。這不是reddit。教！ – Rob

只要你只有一行文字，一個簡單的一招就是設置其line-height到圓的height：

.circle { 
 
    background: rgba(72, 156, 234, 1); 
 
    border-radius: 50%; 
 
    height: 80px; 
 
    width: 80px; 
 
    position: relative; 
 
    box-shadow: 0 0 0 5px #F1F1F1; 
 
    margin: 10px; 
 
    color: #6F0; 
 
    vertical-align: middle; 
 
} 
 

 
.text_circle { 
 
    font-size: 36px; 
 
    margin-bottom: 50px; 
 
    line-height: 80px; 
 
}

<div align="center" class="circle"><span class="text_circle">5</span></div>

來源

2017-06-21 11:02:34 domsson

您的問題有兩種解決方案。

一個

分配position:relative屬性.circle

.circle { 
    position:relative; 
}

以下屬性添加到text_circle

.text_circle { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
}

兩個

將line-height財產分配給circle具有相同的高度。

.circle { 
    line-height: 80px; 
}

來源

2017-06-21 11:05:51

使用css在一個圓圈中間對齊文本

回答

相關問題