底部垂直对齐h3文本,高度为100%

Question

要清楚,我对垂直对齐h3div的底部或其他块元素不感兴趣.我已经知道了.

我的h3身高是100%.我想垂直对齐h3底部的文本.

这是一个小提琴.

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/