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

Posted 2023-03-05

【中文标题】行内块元素垂直对齐到底部不起作用

【英文标题】：vertical align to bottom for inline-block element not working

【发布时间】：2017-05-29 16:13:45

【问题描述】：

我一直在尝试使按钮与底部垂直对齐，我想我可以使用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>

【问题讨论】：

您需要了解vertical-align 不是指包含元素，而是指该元素所属的文本行。

【参考方案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>

【讨论】：

感谢您的回答，但我想知道为什么要添加伪，请解释

您需要它来将内容拉伸到全宽。请参阅vertical-align 不是相对于父高度，而是相对于内容所采用的高度。最初，当您只有一个按钮内容高度仅等于按钮高度但使用伪元素时，内容会拉伸到全高

【参考方案2】：

您可以使用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>

【讨论】：

对于table 布局，您应该使用height 而不是min-height，因为默认情况下表格具有流畅的布局，所以min-height 将不起作用，height 的行为类似于min-height 与 display: table

【参考方案3】：

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

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

【参考方案4】：

给容器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>

【参考方案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>

【讨论】：

感谢您的回答，但是否可以在不使用 position:absolute 的情况下移动按钮？

显然，您也可以从其他答案中看到。有可能。我喜欢这样做。