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％和translateX -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%);
}

Example here

编辑1

要使按钮在不同的块中处于同一级别，我们需要块的高度相同。为此我们可以使用像javascript equalHeigh这样的东西。虽然对我来说最好的选择是使用flexbox。

https://jsfiddle.net/uugmvcvm/

Answer 2

有代码给你。

总数：

用DIV包裹按钮
向父母添加亲戚和填充
将absolute和text-align：center添加到按钮包装器

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
}

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

2 个答案: