Html 如何在CSS中将选项卡标签居中？ 如何将3个标签按钮（标签一、二和三）放在内容的中间？它们现在向左对齐。除此之外，我还希望能找到一个解决方案来隐藏内容，以防用户在他的手机上。我希望这不是太难

.tabs{
位置：绝对；底部：0；
显示器：flex；
柔性包装：包装；
}
.标签{
顺序：1；
显示：块；
填充：1rem2rem；
右边距：0.2rem；
光标：指针；
背景#90CAF9；
字体大小：粗体；
过渡：背景缓和0.2s；
}
.标签.标签{
订单:99份;；
柔性生长：1；
宽度：100%；
显示：无；
填充：1rem；
背景：#fff；
}
.tabs输入[type=“radio”]{
显示：无；
}
.tabs输入[type=“radio”]：选中+标签{
背景：#fff；
}
.tabs输入[type=“radio”]：选中+标签+.tab{
显示：块；
}
@介质（最大宽度：45em）{
.tabs.tab，
.标签{
顺序：首字母；
}
.标签{
宽度：100%；
右边距：0；
边缘顶部：0.2rem；
}
}

表一
表一内容
Lorem ipsum dolor sit amet，奉献精英

表二
表二内容
Lorem ipsum dolor sit amet，奉献精英

表三
表三内容
Lorem ipsum dolor sit amet，奉献精英

在

上使用Flexbox的
对齐内容：中心
。使用
宽度为100%
的选项卡将选项卡对齐在页面中心，如：

.tabs {
  width: 100%;
  justify-content: center;
}

要关闭移动设备上的选项卡，请使用jQuery从
#tabone
中删除选中的
属性，如：

/* If mobile, remove checked attribute (Media Query in JS) */
if (window.matchMedia("(max-width: 45em)").matches) {
  $('#tabone').removeAttr('checked');
}

查看下面的代码段（使用下面的完整页面视图在中间查看）：


/*如果是移动的，请删除选中的属性*/
if（window.matchMedia（（（最大宽度：45em）”）.matches）{
$（“#tabone”）.removeAttr（'checked'）；
}
.tabs{
位置：绝对；底部：0；
显示器：flex；
宽度：100%；
证明内容：中心；
柔性包装：包装；
}
.标签{
顺序：1；
显示：块；
填充：1rem2rem；
右边距：0.2rem；
光标：指针；
背景#90CAF9；
字体大小：粗体；
过渡：背景缓和0.2s；
}
.标签.标签{
订单:99份;；
柔性生长：1；
宽度：100%；
显示：无；
填充：1rem；
背景：#fff；
}
.tabs输入[type=“radio”]{
显示：无；
}
.tabs输入[type=“radio”]：选中+标签{
背景：#fff；
}
.tabs输入[type=“radio”]：选中+标签+.tab{
显示：块；
}
@介质（最大宽度：45em）{
.tabs.tab，
.标签{
顺序：首字母；
}
.标签{
宽度：100%；
右边距：0；
边缘顶部：0.2rem；
}
}

表一
表一内容
Lorem ipsum dolor sit amet，奉献精英

表二
表二内容
Lorem ipsum dolor sit amet，奉献精英

表三
表三内容
Lorem ipsum dolor sit amet，奉献精英

添加到
。选项卡标签
文本对齐：居中
这很有帮助，谢谢！你可能也知道如何在打电话时关闭所有标签吗？@Sissy我已经更新了我的答案，请看一看。请让我知道这个答案是否对你有帮助。关闭手机标签的jQuery部分似乎不起作用，但我会接受你的答案（我不得不说我从未使用过jQuery，但我在我的函数JS文档中添加了这一行）@Sissy你试过运行上面的代码片段吗。根据我的说法，它工作正常。是的，用户应该如何隐藏内容？我尝试了以下测试：$（“tabtwo”）。单击（function（）{if（window.matchMedia（（max width:45em）”）.matches）{$（'#tabone'）。removeAttr（'checked'）；