CSS如何调整按钮对齐方式，使其不全部靠右且位于图片正下方

实现方案 #

你需要把按钮的对齐范围限制在和图片宽度一致的区域内，不要让按钮容器占满整个页面宽度，有两种常用实现方式：

方案1：给图片和按钮加公共父容器（更易维护）

1. HTML结构调整，新增外层包裹容器：

<div class="imgWrapper">
  <img id="course-image2" src="你的图片资源地址" width="260" height="500" alt="guy2" class="center"/>
  <div class="imgButton">
    <button class="check">Gentleman</button>
  </div>
</div>

2. CSS样式补充：

/* 父容器宽度和图片保持一致，内部元素对齐都以这个宽度为基准 */
.imgWrapper {
  width: 260px;
}
.imgButton{
  text-align: right;
  /* 可按需调整按钮和图片的上下间距
  margin-top: 8px;
  */
}

方案2：直接给按钮容器设置固定宽度（改动最小）

不需要修改HTML，直接改CSS即可：

.imgButton{
  width: 260px; /* 宽度和图片一致 */
  text-align: right;
}

原代码问题说明 #

你之前写的.imgButton是块级元素，默认宽度占满整行，所以text-align: right会把按钮对齐到页面最右侧。限制容器宽度后，对齐的参考范围就和图片匹配，按钮自然就会显示在图片正下方的对应位置。

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