logo标签列表

如何在CSS中将标签与div底部对齐？

htmlcsstwitter-bootstrapvertical-alignment
8

可在以下位置找到DEMO：

http://www.bootply.com/VZ7gvA7ndE#

我将

的高度设置为100像素，并想在
的底部显示
垂直对齐： "bottom"; 为什么要使用双引号 " "？ - Kheema Pandey
@KheemaPandey 有一个错误，现已更正。 - Hanfei Sun
8个回答
26

为什么单独使用 vertical-align: bottom 不起作用

由于父元素的高度大于标签的计算高度，使用 vertical-align: bottom 无法 将行内元素移动到父元素的底部。

因为在行内流中，vertical-align 根据其父元素的基线决定元素的位置；而在标签上使用该属性不会改变其父元素的基线位置。

内联级别元素（inline、inline-block）默认情况下坐落在其基线上。如果它们有不同的高度，则最高的元素将确定其他元素的位置。

即在行内流中，最高的元素将影响/移动父元素的基线：

illustration of baseline

寻找解决方案

因此，在父元素有明确的 height 属性的情况下，如果我们可以有一个内联子元素与父元素完全相同的高度（full-height child），它会影响内联流并向下移动基线：

A full-height element which affects the baseline

为了让元素（包括具有下行字母的字母）保持在父级内，我们应该通过声明 vertical-align: bottom; 来 垂直对齐它们。

applying vertical align property

10.8 行高计算：'vertical-align' 属性

baseline
将框的基线与父框的基线对齐。如果框没有基线，则将底边缘与父框的基线对齐。

bottom
将对齐子树的底部与行框的底部对齐。

将所有内容整合在一起

因此，您可以在父元素中创建一个全高元素（个人而言，我更喜欢使用伪元素）来将标签对齐到底部。

这里有一个例子

#contain-word-div:after {
  content: "";
  display: inline-block;
  height: 100%;            /* Let it be as height as the parent */
  vertical-align: bottom;  /* Align the element at the bottom   */
}

#contain-word-lab {
  display: inline-block;
  vertical-align: bottom;  /* Align the element at the bottom   */
}
1
这是一个非常巧妙的小技巧，只要伪元素没问题:D - haxxxton
谢谢！这很有趣！你是说“伪元素”改变了标签的基线吗？有没有关于这个技巧的文档或详细解释？ - Hanfei Sun
@Firegun 这不是关于伪元素的问题，而是关于任何填充父级垂直空间的虚拟元素在内联级别下的情况。也就是说，一个内联全高度子元素。更高的内联元素会影响基线。 - Hashem Qolami
@Firegun 请看一下**这个演示**。当父元素没有明确的高度时，更高的内联元素会影响内联元素的基线。因此，在您的特定情况下，父元素具有明确的高度，如果我们可以有一个具有精确高度的子元素，它将影响基线并将其移动到底部。 - Hashem Qolami
1
@HashemQolami 非常感谢！ - Hanfei Sun
显示剩余3条评论
8
3
把它设置为position:absolute;
#contain-word-lab {
  position:absolute;
  bottom:5px;
}
3

将position:relative应用于父div，并将您的标签设置为position:absolute。

 #contain-word-div {
 height: 100px;
 position:relative;
 }
 #contain-word-lab {
  position:absolute;
  bottom:5px;
 }

DEMO

为什么我们需要设置相对于父元素的位置？有任何想法吗？ - Itzdsp
1

vertical-align 在容器为表格/类似表格元素（如table、tr、td、th）或内联文本元素（如span）时效果最佳。然而，因为使用 table 元素进行布局不是一个好主意，我们可以使用 display:table; 和 display:table-cell; CSS 属性使其他元素像它们一样工作。

尝试应用以下 CSS：

#contain-word-div {
  height: 100px;
  border: 1px solid black; /* added just for visualising position */
  display:table;
}
#contain-word-lab {
  display:table-cell;
  vertical-align: bottom;
  padding-bottom: 5px; /* use padding to give the label more height rather than trying to push the "cell" upwards */
}

{{链接1：DEMO}}

由于OP正在使用TW Bootstrap，因此在table列的显示类型上进行更改可能会导致问题。 - Hashem Qolami
1
可能，但如果这不成为一个问题，它总是可以包含在div元素中。这是一个带有其他div的示例，没有任何问题。http://www.bootply.com/gmpFwz4lIn - haxxxton
0
尝试按照以下步骤进行：

FIDDLE DEMO

#contain-word-lab {
    vertical-align='bottom';/***Remove This***/
    bottom:2px;
    position:absolute;
}
因此，它将与为<html>元素建立的初始包含块相对定位。即在页面底部。 - Hashem Qolami
0

vertical-align 只适用于表格单元格。如果您想将一个元素定位在其父元素的底部，您需要给它添加 position: absolute; 和 bottom: 0;。

“vertical-align” 不仅适用于表格单元格，也适用于行内级别和表格单元格元素。 - Hashem Qolami
并且也适用于inline-block元素。 - 4dgaurav
0

“bottom”无论如何都不会起作用 :) 尝试只使用bottom，不要加上引号。 此外，您的标签也需要一个高度。现在它使用的是自动高度，正好是字体大小。我建议在您的标签中添加line-height: 100px;。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接