Question

我正在尝试将文本与div的底部对齐。通常，当我的div使用固定大小时，这是非常直接的。我用百分比尝试新的东西，垂直对齐似乎根本不起作用。

$(document).ready(function(e) {
    var mh = parseInt($('#map').height());
    var h = 70 - ((20/mh)* 100);
    document.getElementById('map').style.height = h + "%";  
});

#map{
    width:95%;
    height:70%;
    background-color:#F00;
}
<div id="home_header" style="display:table-cell; vertical-align:bottom; width:90%; height:30%;">
<h1>There is currently <?php echo $a; ?> users playing worldwide at the moment.</h1>
</div>
<div id="map"></div>

我知道这可以用固定的尺寸来完成，我以前做过，看过几次。继承人1 example。不知道为什么这不起作用是我必须使用固定大小的divs还是有另一种方式？

UPDATE-此方法适用于固定大小，例如100px;

Answer 1

尝试使用此css块

min-height:10em;
vertical-align:middle;
height:15%;
width:25%;
float:left;
margin:10px;
text-align:center;
padding-bottom:3.5cm;
margin-top:auto;
margin-bottom:auto;

Answer 2

假设您因为未知尺寸而谈论这是一个问题，您可以简单地使用绝对定位....

HTML

<div class="outerDiv">
    <h1>Text to be aligned</h1>
</div>

CSS

.outerDiv {
    position: relative;
    (Other styles here)
}

.outerDiv h1 {
    position: absolute;
    bottom: 0;
    text-align: center; (if needed centralising)
}

这将确保文本始终保持在div的底部，而不管div的高度。

Answer 3

我想分享一下我自己提出的建议，不需要改变CSS。我改变了JavaScript来计算出将div作为一个百分比的大小，并将div缩放到适合页面的其余部分。通过使用固定大小的div所有剩下要做的是调整底部div所以它缩放以适应。

<div id="home_header" style="display:table-cell; vertical-align:bottom; width:90%; height:125px;">


var mh = parseInt($('#map').height());
    var a = ((20/mh)* 100);
    var b = ((125/mh) * 100);
    var c = ((45/mh) * 100);
    var d = 100 - a - b + c; //add page padding back on
    document.getElementById('map').style.height = d + "%";

我在文档就绪函数中使用它，如问题所示。

将文本与div的底部对齐

3 个答案: