如何对齐包含在 div 中央和底部的按钮？

Question

我使用以下 HTML 代码创建了三个相同的框（p 标签中包含的描述长度除外），其中包含图标、标题、描述和按钮：

    .coursebutton {
    display: inline-block;
    border-radius: 4px;
    background-color: #009ada;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    padding: 9px;
    width: 100px;
    transition: all 0.5s;
    cursor: pointer;
    }

    <div class="col_one_third col_one_third_even">
     <div class="feature-box fbox-plain">
      <div class="fbox-icon">
       <img src="images/am-icon.png"/>
      </div>
      <h3>ADVERTISING AND MEDIA</h3>
      <p>Example example example example example example example example example example example example </p>
      <button class="coursebutton" onclick="window.location.href = 'courseinfo/am.html';"><span>Details </span></button>
     </div>
    </div>

无论 p 元素中有多少文本，如何使按钮始终位于框的底部和中心？

Answer 1

有适合您的代码。

总计：

用DIV
向父级添加相对和填充
添加绝对对齐和文本对齐：按钮包装居中

Codepen code

.col_one_third {
  border: 1px solid #ccc;
  text-align: center;
  width: 30%;
  padding-bottom: 40px; // required
  position: relative;   // required
}
.button-wrapper {
  position: absolute;   // required
  bottom: 0;            // required
  left: 0;              // required
  text-align: center;   // required
  width: 100%;          // required
  padding: 5px;         // only styling
}

Answer 2

只需在您的代码中添加相对位置、50% 的左侧和 -50% 的 translateX。无论文本大小如何，按钮将始终居中。

您需要翻译，因为 CSS left 属性基于父元素的大小，而转换属性基于目标元素的大小。使用两者，您可以使内容完全居中于它们的父项中。

.coursebutton {
  display: inline-block;
  border-radius: 4px;
  background-color: #009ada;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  padding: 9px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Example here

编辑 1

为了让按钮在不同的块中处于同一水平，我们需要块具有相同的高度。为此，我们可以使用类似 javascript equalHeigh 的东西。虽然对我来说最好的选择是使用 flexbox。

https://jsfiddle.net/uugmvcvm/

如何对齐包含在 div 中央和底部的按钮？

How to align a button contained within a div central and bottom?

html

css

button

alignment

vertical-alignment