圈內的文字未對齊html css

我正在嘗試將文字置於圓圈內。我正在努力使文本正確對齊（圓圈的中間）。圈內的文字未對齊html css

到目前爲止，我已經試過代碼爲：

CSS：

.circle { 
margin:auto; 
border-radius: 50%; 
background: rgb(0, 34, 102); 
padding: 10px; 
width: 110px; 
height: 110px; 
margin-top:1px; 
color: rgb(255, 255, 255); 
text-align: center; 
}

HTML：

<td colSpan=2> <div class="circle"> Discuss <br> ideas and <br> projects </div> </td>

下面是結果

來源

2016-10-01 lmbcerqueira

也許這答案可能是有益的太:) http://stackoverflow.com/questions/37373734/fully-circular-buttons-with-dynamic-size/37373838#37373838（不一個確切的複製自文字大小，所以圈大小可以改變... –

你正在水平居中但不垂直。您可以嘗試position: relative;或添加填充和text-align: center。

來源

2016-10-01 18:12:34

您可以使用positioning將文字水平和垂直居中在圓圈中。只需使用另一個文本的包裝div，給它一個絕對的位置，頂部和左邊的50％，並將其翻回transform property。

.circle { 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    background: rgb(0, 34, 102); 
 
    padding: 10px; 
 
    width: 110px; 
 
    height: 110px; 
 
    margin-top: 1px; 
 
    color: rgb(255, 255, 255); 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.circle div { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="circle"> 
 
    <div> 
 
    Discuss 
 
    <br>ideas and 
 
    <br>projects 
 
    </div> 
 
</div>

來源

2016-10-01 18:14:10 andreas

圈內的文字未對齊html css

回答

相關問題