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

Question

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

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

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

Answer 1

您可以使用 table 和 table-cell

.cons_wrap_right {
  display: table;
  min-height: 175px;
  width: 25%;
  background: #cccccc;
}

.innerBox {
  vertical-align: bottom;
  display: table-cell;
  text-align: center
}

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

Answer 2

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

编辑：为什么使用伪元素

您需要它来将内容拉伸到全宽。请参阅 vertical-align 不适用于父级高度，但适用于内容所采用的高度。

最初当您只有一个按钮时，内容高度仅等于按钮高度，但通过使用伪元素，内容会延伸到全高。

这里有一个fiddle来说明一下。在此 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 3

您可以尝试为按钮设置绝对位置 class.Like--

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

Answer 4

有两种方法可以做到这一点：使用 position 或 flex。有关示例，请参见下面的片段。

/* 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;
}

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

Answer 5

给容器 position: relative 和按钮 position: absolute 加上 bottom: 0:

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

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

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

vertical align to bottom for inline-block element not working

html

css

css-position

vertical-alignment