圈内的文字未对齐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

回答

相关问题