Html Can'；我无法将我的文本定位在用CSS制作的圆圈中

正如您在这个JSFIDLE上看到的，我的“Hello”文本位于我的红色圆圈之外，而不是它的中心（这是问题1）。问题2是这个“Hello”文本使得“onmouse over”圆圈不再与红色圆圈对齐。 如何解决这两个问题？（对于问题1，我知道我可以使用填充和边距，但我猜这不是一个干净的解决方案+它无法解决问题2。 非常感谢

<div class="ch-item ch-img-1"><p>hello</p>
    <div class="ch-info">
        <h3>Use what you have</h3>
        <p>by Angela</p>
    </div>
</div>

---

您可以使用

绝对位置

和

变换

轻松实现所需

• 另外，使用

  transform

  对IE8及以下版本不起作用，但您已经在其他地方使用了它，所以我想这是可以的

---

您可以使用

绝对位置

和

变换

轻松实现所需

• 另外，使用

  transform

  对IE8及以下版本不起作用，但您已经在其他地方使用了它，所以我想这是可以的

当您在包装器中使用

position:relative；

时，您可以使用

position:absolute；

对其内部内容进行定位

.ch-item p{
position:absolute;
top:35%;
left:40%;
}

当hello文本悬停时，也为其设置

opacity:0

。因为在您的示例中，悬停后hello文本仍然可见

.ch-item:hover p{
opacity:0;
}

当您在包装器中使用

position:relative；

时，您可以使用

position:absolute；

对其内部内容进行定位

.ch-item p{
position:absolute;
top:35%;
left:40%;
}

当hello文本悬停时，也为其设置

opacity:0

。因为在您的示例中，悬停后hello文本仍然可见

.ch-item:hover p{
opacity:0;
}

---

它将仅适用于具有该特定字体大小等的一行。它将仅适用于具有该特定字体大小等的一行。