圆圈内的文字未对齐html css

Question

我正在尝试将文字放在一个圆圈内。我正在努力使文本正确对齐（圆圈的中间）。

到目前为止，我尝试过的代码是：

的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>

结果如下

Answer 1

您可以使用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>

Answer 2

您将其水平居中但不垂直居中。您可以尝试position: relative;或添加填充和text-align: center。