Question

我一直试图让按钮垂直对齐到底部，我想我可以使用display:inline-block方法轻松完成，但不确定我在这里做错了什么！

＆＃13;

.cons_wrap_right {
  display: inline-block;
  min-height: 175px;
  vertical-align: bottom;
  width: 25%;
  background:#cccccc;
}

＆＃13;

<div class="cons_wrap_right">
    <button type="submit" class="ask_btn">Ask Now</button>
</div>

＆＃13;

Answer 1

在button之前添加一个伪元素。

编辑：为什么要使用伪元素

您需要它将内容拉伸到全宽。请参阅vertical-align在父级高度方面无效，但与内容的高度有关。

最初当你只有按钮内容高度只等于按钮高度但是使用伪元素时，内容会拉伸到全高。

这是一个fiddle来解释它。在这个小提琴中，看到按钮在内容的底部对齐。

html,body{
  height:100%;
}
.cons_wrap_right {
  min-height: 175px;
  width: 25%;
  height:50%;
  background:#cccccc;
}
.cons_wrap_right .pseudo{
  display: inline-block;
  width:1px;
  height:100%;
  vertical-align:bottom;
  background:#cccccc;
}
.cons_wrap_right button{
  display: inline-block;
  vertical-align:bottom;
}

<div class="cons_wrap_right">
  <div class="pseudo"></div>
    <button type="submit" class="ask_btn">Ask Now</button>
</div>

Answer 2

您可以使用table和table-cell

执行此操作

＆＃13;

.cons_wrap_right {
  display: table;
  min-height: 175px;
  width: 25%;
  background: #cccccc;
}

.innerBox {
  vertical-align: bottom;
  display: table-cell;
  text-align: center
}

＆＃13;

<div class="cons_wrap_right">
  <div class="innerBox">
    <button type="submit" class="ask_btn">Ask Now</button>
  </div>
</div>

＆＃13;

Answer 3

您可以使用position或flex两种方法执行此操作。有关示例，请参阅下面的代码段。

＆＃13;

/* using position relative and absolute */

.cons_wrap_right {
  min-height: 175px;
  width: 25%;
  background: #cccccc;
  position: relative;
  margin-bottom: 25px;
}
.ask_btn {
  position: absolute;
  bottom: 0;
}
/* using flexbox */

.cons_wrap_right2 {
  min-height: 175px;
  width: 25%;
  background: #cccccc;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

＆＃13;

<div class="cons_wrap_right">
  <button type="submit" class="ask_btn">Ask Now</button>
</div>
<div class="cons_wrap_right2">
  <button type="submit" class="ask_btn2">Ask Now</button>
</div>

＆＃13;

Answer 4

提供容器position: relative和按钮position: absolute以及bottom: 0：

＆＃13;

.cons_wrap_right {
  min-height: 175px;
  width: 25%;
  background: #cccccc;
  position: relative;
}
button {
  position: absolute;
  bottom: 0;
}

＆＃13;

<div class="cons_wrap_right">
  <button type="submit" class="ask_btn">Ask Now</button>
</div>

＆＃13;

Answer 5

您可以尝试为按钮类设置绝对位置。喜欢 -

.cons_wrap_right {
  display: inline-block;
  min-height: 175px;
  position:relative;
  width: 25%;
  background:#cccccc;
}
.ask_btn{
  position: absolute;
  left:    0;
  bottom:   0;
}

<div class="cons_wrap_right">
    <button type="submit" class="ask_btn">Ask Now</button>
</div>

垂直对齐到底部，因为内联块元素不起作用

5 个答案: