如何垂直居中放置圆形文本？

我已经创建了一个圆形分部，里面有文字。问题是文本粘贴到圆圈的顶部我想要文本垂直居中。我的文本不会超过5个字符。如何垂直居中放置圆形文本？

.circle { 
 
    background-color:#000; 
 
    color:white; 
 
    height:150px; 
 
    width:150px; 
 
    border-radius:50%; 
 
}

<center><div class='circle'>hello</div></center>

来源

2016-01-19 bɪˈɡɪnə

定义此属性

display:table-cell; 
vertical-align:middle; 
text-align:center;

.circle { 
 
    background-color:#000; 
 
    color:white; 
 
    height:150px; 
 
    width:150px; 
 
    border-radius:50%; 
 
    text-align:center; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
}

<center><div class='circle'>hello</div></center>

来源

2016-01-19 10:32:20

使用Line-height使其垂直center.Nike使文字垂直中心设为线高度等于其高度。

.circle { 
 
    background-color:#000; 
 
    color:white; 
 
    height:150px; 
 
    line-height:150px; 
 
    width:150px; 
 
    border-radius:50%; 
 
}

<center><div class='circle'>hello</div></center>

来源

2016-01-19 10:32:02 Afsar

这里有一个小提琴：

FIDDLE

只需要显示为表格单元并定义其垂直取向

.circle { 
    background-color: #000; 
    color: white; 
    height: 150px; 
    width: 150px; 
    border-radius: 50%; 
    display: table-cell; 
    vertical-align: middle 
}

来源

2016-01-19 10:34:51 chiapa

<center>已弃用，不应再被使用。建议使用其他定心方法。

至于中心圆圈中的文字，Flexbox，就可以做到这一点：

.circle { 
 
    background-color: #000; 
 
    color: white; 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 1em auto; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class='circle'>hello</div>

来源

2016-01-19 13:52:22

如何垂直居中放置圆形文本？

回答

相关问题