如何将页面中的HTML类按钮链接居中并实现水平对齐？

嘿，我看你已经把按钮链接的基础样式做出来了，不过要实现水平对齐+整体在页面居中的效果，当前代码里的float: left可能会拖后腿——毕竟浮动元素脱离文档流，很难让它们的整体容器自动居中。给你几个实用的调整方案，选一个适合你的就行：

这是目前最简洁高效的布局方式，兼容性也很好（除了极老的浏览器）：

1. 先把.border里的float: left删掉，浮动会干扰Flex的布局逻辑；
2. 给这些按钮的父容器加个Flex布局样式，让它负责排列和居中：

/* 假设你的按钮都放在这个容器里 */
.button-group {
  display: flex;
  justify-content: center; /* 让按钮组在页面水平居中 */
  gap: 10px; /* 控制按钮之间的间距，替代原来的border-spacing */
}

3. 调整.border的样式（保留你原来的核心样式，去掉浮动即可）：

.border {
  display: table;
  width: 220px;
  height: 120px;
  border: 2px solid #1E5034;
  transition: all 250ms ease-out;
  box-sizing: border-box;
  /* 移除 float: left */
}

这样一来，Flex容器会自动让所有.border元素水平排列，并且整个按钮组会在页面中居中，gap属性还能精准控制按钮之间的距离，比border-spacing更直观。

如果需要兼容IE11这类老浏览器，可以试试这个方法：

1. 把.border里的float: left换成display: inline-block；
2. 给父容器设置text-align: center，让inline-block元素自动水平居中：

.button-group {
  text-align: center;
  font-size: 0; /* 消除inline-block元素之间的默认空白间距 */
}

.border {
  display: inline-block; /* 替换float:left */
  width: 220px;
  height: 120px;
  border: 2px solid #1E5034;
  transition: all 250ms ease-out;
  box-sizing: border-box;
  margin: 0 5px; /* 按钮左右各留5px，总间距10px */
  font-size: 17.5px; /* 恢复字体大小，抵消父容器的font-size:0 */
}

这里父容器的font-size: 0是为了去掉inline-block元素之间的默认空白，记得在.border里把字体大小加回来，不然按钮里的文字会消失~

你当前写的.border:hover { border-spacing: 2px; }，如果换成Flex或inline-block布局，border-spacing可能不会生效（它是table专属属性）。如果是想让按钮内部的文字和边框间距变小，可以改成用padding控制：

a.btn {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #ffffff;
  font: 17.5px sans-serif;
  padding: 10px; /* 初始内边距 */
  transition: padding 250ms ease-out; /* 加个过渡动画 */
}

.border:hover a.btn {
  padding: 2px; /* hover时缩小内边距，实现类似效果 */
}

这样hover效果会更稳定，也适配不同的布局方式。

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