如何對齊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

只需在代碼中添加相對位置，左側的50％和一個transformX的-50％。 無論文本大小如何，按鈕都將始終居中。

您需要轉換，因為CSS left屬性是基於父元素的大小，而transform屬性是基於目標元素的大小。 使用這兩種方法，您可以將內容完全集中在其父級中。

.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%);
}

這里的例子

編輯1

為了使按鈕在不同塊中處於相同的水平，我們需要塊具有相同的高度。 為此，我們可以使用javascript equalHeigh之類的東西。 雖然對我來說最好的選擇是使用flexbox。

https://jsfiddle.net/uugmvcvm/

Answer 2

有適合您的代碼。

總：

• 通過DIV包裝按鈕
• 向父級添加相對和填充
• 添加絕對和文本對齊：中心到按鈕包裝

代碼筆代碼

.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
}