Question

我有以下代码。

＆＃13;

.circle
{
width:251px;
height:251px;
border-radius:50%;
font-size:16px;
color:#fff;
line-height:50px;
text-align:center;
background:#000;
}

＆＃13;

<!DOCTYPE HTML>
<body>
<div class="circle">Hello Guys! Please help Me...</div>
</body>

＆＃13;

jsFiddle Link

我想要做的是将文字放在中心，但我不知道如何做到这一点。

Answer 1

http://jsfiddle.net/b6335umv/1/ 行高就是你所需要的。

.circle
{
width:251px;
height:251px;
border-radius:50%;
font-size:16px;
color:#fff;
text-align:center;
background:#000;
line-height: 251px;
}

Answer 2

线高是一个很好的解决方案。关键是（当包含元素具有定义的高度时），行高和包含元素的高度是相同的。

在你的情况下

.circle {
  width:251px;
  height:251px;
  border-radius:50%;
  font-size:16px;
  color:#fff;
  line-height:251px;
  text-align:center;
  background:#000;
}

然而，在响应的情况下，元素更流畅且高度未明确定义，通常最好使用不使用单位的行高。 This article对原因的详细解释有很好的解释。

如何在CSS中居文本？

2 个答案: