Question

要清楚，我对将h3垂直对齐到div的底部或其他块元素不感兴趣。我已经知道了。

我有h3，身高100％。我想将h3中的文字垂直对齐到底部。

这是Fiddle。

div {
    border: 1px solid #ccc;
    height: 200px;
    text-align: center;
    width: 150px;
}
h3 {
    height: 100%;
    vertical-align: bottom;
}

<div>
    <h3>Kitchen Experiments</h3>
</div>

Answer 1

这可能会成功。

对于以下HTML：

<div>
    <h3>Kitchen Experiments</h3>
</div>

应用以下CSS：

div {
    border: 1px solid #666;
    height: 200px;
    text-align: center;
    width: 150px;
}

h3 {
    height: inherit;
    vertical-align: bottom;
    background-color: pink; /* optional to show extent of element */
    margin: 0;
    display: table-cell;
}
h3:after { /* trick to add bottom padding */
    content: '';
    display: block;
    height: 10px; 
}

将display: table-cell应用于h3并继承高度（而不是100％）。

父div仍然是一个块元素，所以它可能会响应（但你需要自己尝试）。

如果需要控制文本和父块之间的底部填充，您可以使用伪元素包含规则。

演示：http://jsfiddle.net/audetwebdesign/RJ6YM/

Answer 2

写：

div {
    display:table;
}

h3 {
    vertical-align: bottom;
    display:table-cell;
}

Updated fiddle here.

Answer 3

您可以通过将H3元素绝对定位在div中来实现。这是一个更新的小提琴http://jsfiddle.net/7Lcvy/2/

Answer 4

对于那些可以使用flexbox的人来说，这里有一个灵活的选择：

div {        
  display: flex;
  ...
}

h3 {
  display: flex;
  align-self: center;
  ...
}

http://jsfiddle.net/mrchief/62a7djxh/1/

底部垂直对齐h3文本，高度为100％

4 个答案: