如何实现div内btn-group浮动按钮组水平居中显示

需求 #

将按钮组放置在对应文本下方，且在屏幕水平居中位置显示。

现有代码 #

CSS 代码 #

.btn-group button {
  border: 3px solid green;
  padding: 10px;
  background-color: #04AA6D;
  /* Green background */
  border: 1px solid green;
  /* Green border */
  color: white;
  /* White text */
  padding: 10px 24px;
  /* Some padding */
  cursor: pointer;
  /* Pointer/hand icon */
  float: left;
  /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}


/* Add a background color on hover */

.btn-group button:hover {
  background-color: #3e8e41;
}

HTML 代码 #

<div class="btn-group">
  <button type="button" class="button1">Faucet</button>
  <button type="button" class="button2">About Nano/Faucet</button>
  <button type="button" class="button3">Donate</button>
</div>

当前效果 #

问题原因 #

原有代码中按钮使用float: left实现横向排列，但父容器.btn-group默认是块级元素占满整行宽度，没有做宽度收缩和居中适配，所以无法实现居中效果。另外原有CSS存在重复定义的冗余属性：开头声明的border: 3px solid green和padding: 10px会被后面的同名属性覆盖，可以直接删除。

实现方案 #

方案1：最小改动（保留原有浮动逻辑） #

只需要给.btn-group父容器新增如下样式即可，不需要改动原有按钮和清除浮动的逻辑：

.btn-group {
  /* 让父容器宽度自动收缩，贴合内部按钮的总宽度 */
  width: fit-content;
  /* 水平居中 */
  margin: 0 auto;
  /* 如果需要和上方文本拉开间距，按需调整上边距数值 */
  margin-top: 16px;
}

使用时只需要把.btn-group的HTML结构放在对应文本元素的后面，就会自动按文档流排在文本下方，且水平居中。

注：fit-content兼容所有现代浏览器，如果需要兼容IE等极老旧浏览器，可以给按钮外层套一个inline-block的父级再给外层父元素设置text-align: center即可，目前绝大多数场景不需要额外兼容。

方案2：更简洁的Flex实现（推荐） #

可以删掉原有浮动、清除浮动的相关代码，改用Flex布局实现横向排列+居中，代码更简洁易维护：

/* 父容器样式 */
.btn-group {
  display: flex;
  width: fit-content;
  margin: 16px auto 0;
}
/* 按钮样式，删掉原有float属性和重复的冗余声明 */
.btn-group button {
  background-color: #04AA6D;
  border: 1px solid green;
  color: white;
  padding: 10px 24px;
  cursor: pointer;
}
/* 去掉按钮间重复边框 */
.btn-group button:not(:last-child) {
  border-right: none;
}
/* hover效果保持不变 */
.btn-group button:hover {
  background-color: #3e8e41;
}

这个方案不需要写clearfix清除浮动，布局稳定性更高。

内容的提问来源于stack exchange，提问作者Bugle TV