CSS下载按钮居中实现求助：按钮位置始终偏移异常

问题描述 #

尝试将下载按钮设置为居中显示，但按钮始终处于偏移位置，当前使用的代码如下：

CSS代码 #

.PDF-Download {
  display: block;
  border-color: rgb(218, 251, 3);
  text-align: center;
  padding: 10px 10px;
  border-radius: 10px;
  background-color: rgb(204, 192, 28);
}

HTML代码 #

<p class="PDF-Download">Download PDF Summary</p>

问题效果：

解决方法 #

你当前的text-align: center仅实现了按钮内部文字的居中，并未让按钮本身在父容器中居中，以下两种方案可解决问题：

方案1：设置按钮宽度+自动水平外边距 #

给按钮添加固定宽度（或最大宽度），再通过margin: 0 auto实现块级元素的水平居中：

.PDF-Download {
  display: block;
  border-color: rgb(218, 251, 3);
  text-align: center;
  padding: 10px 10px;
  border-radius: 10px;
  background-color: rgb(204, 192, 28);
  /* 新增样式 */
  width: 220px; /* 可根据需求调整宽度 */
  margin: 0 auto;
}

方案2：改为行内块元素+父容器居中 #

若不想固定按钮宽度，可将按钮设为inline-block，再给其父容器添加text-align: center：

.PDF-Download {
  display: inline-block; /* 修改display属性 */
  border-color: rgb(218, 251, 3);
  text-align: center;
  padding: 10px 10px;
  border-radius: 10px;
  background-color: rgb(204, 192, 28);
}
/* 给按钮父容器添加样式 */
.btn-wrapper {
  text-align: center;
}

对应的HTML结构调整：

<div class="btn-wrapper">
  <p class="PDF-Download">下载PDF摘要</p>
</div>

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