垂直对齐问题答案

【问题标题】：vertical-align issue垂直对齐问题
【发布时间】：2012-05-29 20:45:11
【问题描述】：

我正在尝试让垂直对齐在显示为表格单元格的 div 上工作。

请参阅http://jsfiddle.net/midnitesonnet/Rwahk/ 获取 html/css。

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

谢谢。

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

http://jsfiddle.net/Rwahk/7/ 随心所欲地工作......

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

【讨论】：

【解决方案2】：

我编写了这个小 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();

享受美好的一天:)

【讨论】：

【解决方案3】：

您定义 display:table-cell 和 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/

【讨论】：

【解决方案4】：

您不应该在纯 html 中使用尺寸属性（唯一的例外可能是图像，但这仍然是个坏主意）。

【讨论】：

其实给图片添加维度属性是加快页面加载速度的好办法。

【解决方案5】：

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

【讨论】：