CSS圆心文本

我试图制作一个简单的圆形按钮来表示比萨饼大小的按钮，但我在文本居中方面遇到了问题。如果有人有解决方案，你可以自己用我尝试过的方法将其文本输出 填充，也可以拉伸圆 空白，没有回应 不知道我做错了什么，谢谢

.pizzaOptions{
边缘：1米；
垫面：1%；
宽度：60%；
保证金：自动；
显示器：flex；
柔性包装：包装；
自对准：居中；
对齐内容：之间的空间；
}
输入{
不透明度：0；
}
.尺寸{
显示：内联块；
边缘：1米；
高度：100px；
宽度：100px；
边框：15px#333实心；
边界半径：50%；
保证金：自动；
}
跨度{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
字体系列：“蒙特塞拉特”，无衬线；
}
#小的{
字号：1em；
宽度：100px；
高度：100px；
}
#中等{
利润率：20px；
字号：1.5em；
宽度：150px；
高度：150像素；
}
#大的{
字号：2em；
宽度：200px；
高度：200px；
}

小型4英寸4.00英镑
中型6英寸6.00英镑
大号9英寸9.00英镑

使用flexbox尝试以下代码：

.pizzaOptions{
边缘：1米；
垫面：1%；
宽度：60%；
保证金：自动；
显示器：flex；
柔性包装：包装；
自对准：居中；
对齐内容：之间的空间；
}
输入{
不透明度：0；
位置：绝对位置；
}
.尺寸{
边缘：1米；
高度：100px；
宽度：100px；
边框：15px#333实心；
边界半径：50%；
保证金：自动；
}
跨度{
文本对齐：居中；
垂直对齐：中间对齐；
字体系列：“蒙特塞拉特”，无衬线；
宽度：100%；
}
标签{
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
#小的{
字号：1em；
高度：100px；
宽度：100px；
}
#中等{
利润率：20px；
字号：1.5em；
高度：150像素；
宽度：150px；
}
#大的{
字号：2em；
高度：200px；
宽度：200px；
}

小型4英寸4.00英镑
中型6英寸6.00英镑
大号9英寸9.00英镑

使用flexbox尝试以下代码：

.pizzaOptions{
边缘：1米；
垫面：1%；
宽度：60%；
保证金：自动；
显示器：flex；
柔性包装：包装；
自对准：居中；
对齐内容：之间的空间；
}
输入{
不透明度：0；
位置：绝对位置；
}
.尺寸{
边缘：1米；
高度：100px；
宽度：100px；
边框：15px#333实心；
边界半径：50%；
保证金：自动；
}
跨度{
文本对齐：居中；
垂直对齐：中间对齐；
字体系列：“蒙特塞拉特”，无衬线；
宽度：100%；
}
标签{
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
#小的{
字号：1em；
高度：100px；
宽度：100px；
}
#中等{
利润率：20px；
字号：1.5em；
高度：150像素；
宽度：150px；
}
#大的{
字号：2em；
高度：200px；
宽度：200px；
}

小型4英寸4.00英镑
中型6英寸6.00英镑
大号9英寸9.00英镑

修改span的显示属性

 #span{
  display:block;
}

---

当使用其他表格时，表格单元格的对齐方式不正确。它不遵守其他规则，如垂直对齐、浮动等。

修改span的显示属性

 #span{
  display:block;
}

---

当使用其他表格时，由于表格单元格的对齐方式不正确。它不遵守其他规则，如垂直对齐、浮动等。

谢谢你这么做和它的工作，但现在我有另一个问题，就是从顶部移动它，如果你进入你的代码片段并单击全屏，你会看到我的意思。谢谢你这么做和它的工作，但是现在我还有另一个问题，就是从顶部移动它，如果你进入你的代码片段，点击全屏，你就会明白我的意思。