将文本围在圆圈内并向圆圈添加小标题（HTML/CSS）

我不熟悉html和css，我正在尝试找出如何使用html和css构建形状

我想把两行文字放在一个圆圈中，并在圆圈中添加一个小标题，如下所示，

我想在一个两行表格中对齐6个这样的圆（每行3个单元格）。表格中的每个单元格都是一个圆圈（内有两行文字），上面有一个小说明

有人能帮我做这件事吗

---

谢谢。

这可以使用CSS完成

HTML代码：

<table>
    <tr>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
    </tr>
    <tr>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
    </tr>
</table>

描述
圈1
圈2
描述
圈1
圈2
描述
圈1
圈2
描述
圈1
圈2
描述
圈1
圈2
描述
圈1
圈2

CSS代码：

<style>
.circle
{
    width:50px;
    height:50px;
    border-radius:25px;
    font-size:9px;
    color:#fff;
    line-height: 25px;
    text-align:center;
    background:#000
}
table tr td {
    padding: 10px;
    text-align: center
}
</style>

圆圈
{
宽度：50px；
高度：50px；
边界半径：25px；
字体大小：9px；
颜色：#fff；
线高：25px；
文本对齐：居中；
背景：#000
}
表tr td{
填充：10px；
文本对齐：居中
}

工作示例：

---

更新小提琴：

试试这个。我写了一个代码

淡入效果
身体{
保证金：0；
}
我的圈子{
宽度：500px；
高度：500px；
利润率：50像素；
背景：-webkit线性梯度（蓝色、白色）；
颜色：黑色；
边界半径：250px；
}
第1行
第2行

阅读CSS规则：边框半径、填充、行高、文本对齐和背景色

---

你可以这样做；）

你能告诉我你到目前为止所做的代码吗？还要记住，你几乎可以在任何图形设计工具（Photoshop Anywhere？）中使用滴管来获取你想要的配色方案的十六进制数。非常感谢你的回答。我想知道是否可以将圆圈内的文本对齐到圆圈的中心。@Ranger如果这个答案对您有帮助，请接受它，以便将来的读者能够正确回答您的问题。我希望这两个文本从圆圈的中心开始。你能告诉我怎么做吗？