Html 对中btn工具栏内部面板

我的面板主体内有一个btn工具栏，我希望：

将一组按钮居中放置

确保在移动视图中，三个按钮位于顶部，三个按钮位于底部

有很多类似的问题，我尝试过各种可能的解决方案，但似乎都不起作用（文本对齐：居中，边距：0自动，等等）。任何帮助都将不胜感激

2016
2015
2014
2013
2012
2011
2010

要确保按钮居中，可以将按钮的容器设置为

显示：内联块

，并将该容器设置为

文本对齐：居中

您有7个按钮，但通过以上更改，它们在手机上看起来还可以

以下是您需要的CSS：

.panel-body {
  text-align: center;
}
.btn-toolbar {
  display: inline-block;
}
.btn-toolbar .btn {
  margin-bottom: 5px;
}

检查代码笔：

要确保按钮居中，可以将按钮的容器设置为

显示：内联块

，并将该容器设置为

文本对齐：居中

您有7个按钮，但通过以上更改，它们在手机上看起来还可以

以下是您需要的CSS：

.panel-body {
  text-align: center;
}
.btn-toolbar {
  display: inline-block;
}
.btn-toolbar .btn {
  margin-bottom: 5px;
}

检查代码笔：

---

谢谢！所以，当文本对齐一组内容时，是否总是需要将display:inline块添加到该组中？不，有很多因素会影响这一点。在这种情况下，它成功了：）谢谢！所以，当文本对齐一组内容时，是否总是需要将display:inline块添加到该组中？不，有很多因素会影响这一点。在这种情况下，它起了作用：）