HTML/CSS：居中对齐选项卡

问题：下面的html/css可以很好地显示选项卡，但我想将它们与中心对齐。我尝试了各种方法，但它们仍然向左对齐。如何将三个选项卡对齐到中心，并使它们保持在块内？非常感谢您的帮助，谢谢

我还附上了一张照片供参考

main{
最小宽度：320px；
最大宽度：1000px；
填充：50px；
保证金：0自动；
背景：#fff；
}
部分{
显示：无；
填充：20px0；
边框顶部：1px实心#ddd；
}
.标签{
显示：无；
宽度：100%；
保证金：0自动；
}
标签{
显示：内联块；
保证金：0自动；
填充：15px 25px；
文本对齐：居中；
颜色：#bbb；
}
标签[对于*='1']：在{
内容：；
}
标签[对于*='2']：在{
内容：；
}
标签[对于*='3']：在{
内容：；
}
标签：悬停{
颜色：#888；
光标：指针；
}
.选项卡：选中+标签{
颜色：#555；
底部边框：2倍纯色橙色；
}
#表1：选中~#内容1，
#表2：选中~#内容2，
#表3：选中~#内容3{
显示：块；
}

表1
表2
表3
表2
此处将显示随机文本

表3
此处将显示随机文本

表3
此处将显示随机文本

您可以将选项卡包装在一个div中，然后将包装器css设置为margin:auto和width:20%或使其保持内联的任何值。

以下是我使用的方法

我添加了一些持有者和一些css代码

main{
最小宽度：320px；
最大宽度：1000px；
填充：50px；
保证金：0自动；
背景：#fff；
}
部分{
显示：无；
填充：20px0；
边框顶部：1px实心#ddd；
}
.标签{
显示：无；
保证金：0自动；
}
标签{
填充：15px 25px；
文本对齐：居中；
颜色：#bbb；
显示器：flex；
边框：1px纯蓝色；
自对准：居中；
}
标签[对于*='1']：在{
内容：；
}
标签[对于*='2']：在{
内容：；
}
标签[对于*='3']：在{
内容：；
}
标签：悬停{
颜色：#888；
光标：指针；
}
.标签架{
显示器：flex；
对齐项目：居中；
弯曲方向：立柱；
边框：1px纯红；
}
.石斑鱼{
显示器：flex；
弯曲方向：行；
边框：1px纯绿色；
}

表1
表2
表3

我使用了“永远好作弊”的中间标签

<center>
  <input class="tabs" id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Tab 1</label>

  <input class="tabs" id="tab2" type="radio" name="tabs">
  <label for="tab2">Tab 2</label>

  <input class="tabs" id="tab3" type="radio" name="tabs">
  <label for="tab3">Tab 3</label>
</center>

表1
表2
表3

只需将

文本对齐：居中

添加到

主

，然后使用

文本对齐：左

将其全部重置在

部分

它将影响

内联块

元素，但不会影响

节

是

块

，尽管后代可能会继承它，重置将解决这一问题

堆栈片段

main{
最小宽度：320px；
最大宽度：1000px；
填充：50px；
保证金：0自动；
背景：#fff；
文本对齐：居中；/*已添加*/
}
部分{
显示：无；
填充：20px0；
边框顶部：1px实心#ddd；
文本对齐：左；/*已添加*/
}
.标签{
显示：无；
宽度：100%；
保证金：0自动；
}
标签{
显示：内联块；
保证金：0自动；
填充：15px 25px；
文本对齐：居中；
颜色：#bbb；
}
标签[对于*='1']：在{
内容：；
}
标签[对于*='2']：在{
内容：；
}
标签[对于*='3']：在{
内容：；
}
标签：悬停{
颜色：#888；
光标：指针；
}
.选项卡：选中+标签{
颜色：#555；
底部边框：2倍纯色橙色；
}
#表1：选中~#内容1，
#表2：选中~#内容2，
#表3：选中~#内容3{
显示：块；
}

表1
表2
表3
表2
此处将显示随机文本

表3
此处将显示随机文本

表3
此处将显示随机文本

Hey@awtrimpe-谢谢你的提示。学习新东西总是很好的。这是可行的，但不幸的是，它集中了一切。我只希望三个输入居中。我把标签移到了那个部分，但打破了逻辑。如果我这样做，秒（1-3）将不再打开。@AndrewK不使用

，多年前它就被弃用了。