html - 如何在不添加填充属性的情况下在带圆圈的 CSS 的中心添加小文本？

Question

嗨，我使用边框半径属性在 CSS 中创建了一个圆形。

在这里，我想在圆心添加小文本而不添加填充属性，因为填充会增加圆的大小。

如何实现这一点，有什么想法吗？

这是代码：

#circle
{
width:100;
height:100;
border-radius:100%;
Background-color:black;
}

HTML

   <div id="circle">
      hi
   </div>

Answer 1

这行得通。JSFiddle：http: //jsfiddle.net/3qPqF/

CSS

#circle {
width:100px;
height:100px;
border-radius:100%;
background-color:tomato;
}

#circle p {
text-align:center;
line-height:100px;
}

HTML

<div id="circle"> <p> Google</p> </div>

Answer 2

您可以通过将 line-height 属性调整为与元素包装器相同的高度来设置文本元素垂直居中，在您的情况下 #circle div line-height 设置为 100px 。

/* CSS*/
#circle
{
width:100px;
height:100px;
border-radius:100%;
background-color:black;
text-align:center;
color:#fff;
line-height:100px



}

在这里查看实现 http://jsfiddle.net/FB64v/

Answer 3

使用text-align:center;line-height:100px;（其中 line-height 等于所需的 div 高度）。

此外，您应该为 CSS 尺寸指定单位：width:100使用. 而不是width:100px.

Answer 4

#circle {
    background: black;
    border-radius: 100%;
    color: #FFFFFF;
    display: table-cell;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    width: 100px;
}

我希望这是你想要的。