Question

我正在尝试使用vertical-align来处理显示为table-cell的div。

有关html / css的信息，请参阅http://jsfiddle.net/midnitesonnet/Rwahk/。

我似乎无法将显示器垂直对齐到底部。任何帮助将非常感激。

感谢。

Answer 1

您定义display:table-cell＆amp; position:absolute会产生问题。只需删除 .title DIV height。

#whats_available .title {
    position: absolute;
    z-index: 1000;
    bottom: 0;
    left: 0;
    text-align: center !important;
    width: 100%;
    color: #fff;
}

选中此http://jsfiddle.net/Rwahk/5/

Answer 2

http://jsfiddle.net/Rwahk/7/按您的意愿运作......

所做的更改是将display: table;添加到#whats_available > div并将.title更改为position: relative;

Answer 3

您应该将内部div的高度更改为30px而不是100％ http://jsfiddle.net/Rwahk/4/

Answer 4

你不应该在纯HTML中使用维度属性（唯一的例外可能是图像，但它仍然是个坏主意。）

Answer 5

我写了这个小jQuery函数，它可能对你或其他读者有用。

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

使用：

$(selector).center();

享受并度过美好的一天：）

垂直对齐问题

5 个答案: