如何用CSS实现按钮的响应式对齐？需将按钮置于左下角

要把按钮固定在横幅左下角且适配不同屏幕尺寸，你需要调整定位逻辑和容器布局，以下是修改后的代码：

修改后的HTML代码 #

<div class="third-banner-container">
  <div class="third-banner">
    <a href="#" class="btn btn-danger banner-btn">LEARN MORE</a>
  </div>
</div>

修改后的CSS代码 #

.third-banner-container {
  width: 90%;
  margin: 0 auto; /* 替代<center>实现水平居中 */
}

.third-banner {
  background-image: url("banner3new.JPG");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative; /* 为子元素绝对定位提供参考基准 */
  width: 100%;
  /* 用padding-top维持图片宽高比，示例为16:9比例，可根据你的实际图片调整数值 */
  padding-top: 56.25%;
}

.banner-btn {
  border-radius: 17px;
  color: white;
  font-size: 23px;
  position: absolute; /* 绝对定位固定在左下角 */
  bottom: 20px; /* 距离底部的间距，可按需调整 */
  left: 20px; /* 距离左侧的间距，可按需调整 */
}

.banner-btn:hover {
  background-color: #1492ed;
  border-color: #1492ed;
}

关键修改说明 #

• 移除<center>标签，用margin: 0 auto实现横幅水平居中，更符合现代CSS开发规范。
• 给.third-banner设置position: relative，让按钮的绝对定位基于这个容器，避免脱离布局流。
• 用padding-top替代固定height，根据图片宽高比设置百分比，确保横幅在不同屏幕下自动适配高度，防止图片变形。
• 按钮使用position: absolute，通过bottom和left属性固定在左下角，响应式场景下会随容器缩放自动调整位置，无需依赖固定margin值。

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