CSS按钮hover时letter-spacing增大导致偏移，如何保持居中？

你的按钮hover时向右偏移的核心原因是使用了float: left，这个属性会让按钮脱离正常文档流，同时.buttons容器没有设置有效的居中布局，导致按钮宽度增加时只能向右侧扩展。而页面中的.title能保持居中，是因为它通过width: fit-content + margin-left: auto; margin-right: auto实现了水平居中，宽度变化时会向两侧均匀延伸。

具体修改方案： #

• 移除按钮的float: left属性，让它回到正常文档流中
• 给.buttons容器添加和.title一致的居中样式，让容器先水平居中，按钮作为子元素自然跟随容器居中
• 可选：给按钮添加width: fit-content，确保按钮宽度始终适配内容

修改后的相关CSS代码：

.buttons {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

button {
  margin-left:20px;
  font-weight: 500;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  border-radius: 4px;
  color: white;
  background-color: rgb(42, 43, 54);
  transition-duration: 0.4s;
  border: 1px solid rgb(42, 43, 54);
  /* 移除float: left */
  width: fit-content;
}

另外注意一个小问题：你的HTML中<h4>About me:</h2>标签不匹配，应该改成<h4>About me:</h4>。

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