Html 使用一个div在表格单元格中定位圆

我不熟悉html和css，有一个有趣的问题。我想在一个表格单元格中放置一个高度和宽度为40px的红色圆圈，并保持此高度和宽度，无论表格单元格的高度或宽度如何。因此，它将如下所示：

圆圈始终居中，大小相同，单元格的其余部分为空白。如果可能的话，我还想使用一个css类来实现这一点，如下所示：

   td.circle {
        background: #f00;
        width: 40px;
        height: 40px;
        right:50%;
        bottom: 50%;
        vertical-align: middle;
        transform: translate (50%,50%);
        border-radius: 50%;
    }

---

目前，我用的代码用单元格的宽度或高度扩展圆圈，用单元格的宽度或高度扩展高度，有没有办法阻止这种情况发生？

如果你不能在

td

中放一个div，并将其用作圆圈，那么这听起来像是伪元素的工作

表格{
宽度：80%；
保证金：1em自动；
}
运输署{
边框：1px纯灰；
}
td.圆圈：之前{
内容：attr（数据字符）；
显示：块；
背景：#f00；
宽度：40px；
高度：40px；
线高：40px；
文本对齐：居中；
垂直对齐：中间对齐；
边界半径：50%；
保证金：0自动；
}

---

如果你不能在

td

中放一个div作为你的圆圈，那么它听起来就像是一个伪元素的工作

表格{
宽度：80%；
保证金：1em自动；
}
运输署{
边框：1px纯灰；
}
td.圆圈：之前{
内容：attr（数据字符）；
显示：块；
背景：#f00；
宽度：40px；
高度：40px；
线高：40px；
文本对齐：居中；
垂直对齐：中间对齐；
边界半径：50%；
保证金：0自动；
}

---

您可以使用div来执行此操作

表格{
宽度：50%；
}
运输署{
边框：1px实心；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：25%；
高度：80px；
}
.圆圈{
内容：“；
背景：透明；
显示：内联块；
宽度：40px；
高度：40px；
线高：40px；
边框：3倍纯红；
边界半径：50%；
}

H
我
J
K

您可以使用div来执行此操作

表格{
宽度：50%；
}
运输署{
边框：1px实心；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：25%；
高度：80px；
}
.圆圈{
内容：“；
背景：透明；
显示：内联块；
宽度：40px；
高度：40px；
线高：40px；
边框：3倍纯红；
边界半径：50%；
}

H
我
J
K

这几乎是完美的。最后一个请求-在这个圆圈的中心添加文本是否容易？例如“A”。我该怎么做呢？有没有办法将文本放在圆圈中心的单元格中？但例如，td标签之间的“H”字符。太好了，我们就快到了。我想使用在我的TD标签（H）中间插入的“H”字符，而不是CSS中的字符。这是可能的吗？像这样：但是以“H”、“I”、“J”和“K”为中心在圆圈内。如果没有另一个div标签，这是可能的吗？这几乎是完美的。最后一个请求-在这个圆圈的中心添加文本是否容易？例如“A”。我该怎么做呢？有没有办法将文本放在圆圈中心的单元格中？但例如，td标签之间的“H”字符。太好了，我们就快到了。我想使用在我的TD标签（H）中间插入的“H”字符，而不是CSS中的字符。这是可能的吗？像这样：但是以“H”、“I”、“J”和“K”为中心在圆圈内。如果没有另一个div标签，这是可能的吗？我用第二个示例更新了我的答案，以您想要的方式。。。但是我仍然建议将

attr（）

与

一起使用，这样会更好、更干净。我用第二个示例更新了我的答案，以您想要的方式。。。但我仍然建议将

attr（）

与

一起使用，这样会更好、更干净。