小屏幕下按钮位置偏移 如何不用margin-left:0实现居中对齐

问题原因 #

你之前尝试的样式未生效有两个核心原因：

1. 样式没有写入对应小屏幕的媒体查询规则中，要么全局覆盖了桌面端的左对齐逻辑，要么断点不匹配没有触发
2. 样式没有作用到按钮对应的目标元素，或是按钮本身的浮动、display属性阻碍了居中规则生效

正确实现方案 #

首先确定你项目中小屏幕的触发断点（常见移动端断点为max-width:767px，可根据实际需求调整），所有小屏幕适配样式都要写在该媒体查询内部，避免影响桌面端布局。
下面提供两种可用的实现方式：

方式一：同步继承父容器的文本对齐规则

/* 保留原有桌面端样式逻辑 */
@media (min-width: 768px) {
  .content-caption {
    margin-left: 10%;
    text-align: left;
  }
}

/* 小屏幕适配 */
@media (max-width: 767px) {
  .content-caption {
    margin-left: 0;
    text-align: center;
  }
  /* 此处替换为你页面中按钮的实际类名 */
  .content-caption .get-involved-btn {
    display: inline-block;
    /* 若按钮原有float属性，需要添加下面这行清除浮动 */
    float: none;
  }
}

方式二：单独给按钮加居中规则（不用修改父容器样式）

@media (max-width: 767px) {
  /* 此处替换为你页面中按钮的实际类名 */
  .content-caption .get-involved-btn {
    display: table;
    margin: 0 auto;
  }
}

内容的提问来源于stack exchange，提问作者Alan V K