如何在Blogger文章中居中HTML按钮？

嘿，我明白你现在的困扰——按钮样式都弄好了，就是没法居中显示对吧？别担心，这其实是因为你的按钮元素（<a>和<button>）默认是**行内块（inline-block）**元素，它们不会自动占满父容器的宽度，所以直接设置居中不会生效。下面给你几种简单有效的解决方案，任选一种都能搞定：

方法1：利用父容器的text-align: center（最简便） #

行内/行内块元素会继承父元素的text-align属性，所以我们只需要把按钮放在一个容器里，给容器加上text-align: center即可：

修改后的代码：

<html>
<head>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
/* 新增容器样式 */
.button-container {
  text-align: center;
}
</style>
</head>
<body>
<h2>Buttons</h2>
<div class="button-container">
  <a class="button" href="#">Link Button</a>
  <button class="button">Button</button>
</div>
</body>
</html>

方法2：将按钮设为块级元素并使用margin: 0 auto #

如果你的按钮是单独一个，不需要和其他按钮并排，也可以把按钮改成块级元素，然后通过左右自动margin来居中：

修改后的代码（仅调整.button样式）：

<html>
<head>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  /* 把inline-block改成block */
  display: block;
  font-size: 16px;
  /* 左右margin自动，实现居中 */
  margin: 4px auto;
  cursor: pointer;
}
</style>
</head>
<body>
<h2>Buttons</h2>
<a class="button" href="#">Link Button</a>
<button class="button">Button</button>
</body>
</html>

注意：这种方法下每个按钮会单独占一行，如果想让多个按钮在同一行居中，还是用方法1更合适。

方法3：使用Flexbox布局（现代推荐方案） #

Flexbox是现在更灵活的布局方式，兼容性也很好，给父容器设置Flex属性就能轻松实现居中：

修改后的代码：

<html>
<head>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
/* Flex容器样式 */
.button-container {
  display: flex;
  justify-content: center;
  /* 如果需要垂直居中可以额外添加 align-items: center; */
}
</style>
</head>
<body>
<h2>Buttons</h2>
<div class="button-container">
  <a class="button" href="#">Link Button</a>
  <button class="button">Button</button>
</div>
</body>
</html>

这三种方法都能完美解决你的按钮居中问题，你可以根据自己的布局需求选择最合适的一种~

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