1

我的模板中有三行主 div。我有一个页眉、一个内容包装器和一个页脚。页眉紧贴顶部,页脚紧贴底部。我在两者之间有一个内容包装器 div。我基本上想在两个 div 中垂直居中内容包装器。内容 div 将始终是动态高度,因此 line-height 方法对我不起作用。对我来说最好的方法是什么?

4

3 回答 3

2

垂直居中内容

在不使用 JavaScript 的情况下,垂直居中动态内容的方法数量有限:

  1. HTML 表格
  2. CSS 表格
  3. CSS3 弹性盒
  4. CSS3 网格

在这种情况下,现代方法是使用 CSS 表格,相当于 HTML 表格。但如果需要支持 IE7 或更早版本,则改用 HTML 表格。Flexbox 不适合这种特殊情况,并且它不受 IE9 和更早版本的支持。CSS网格目前只有IE10支持,标准还没有最终确定。

CSS表格的基本用法是:

HTML

<div class="table">
    <div class="row">
        <div class="cell">Content</div>
    </div>
</div>

CSS

.table {display: table;}
.row   {display: table-row;}
.cell  {display: table-cell;}

演示   (测试于:IE8/9/10、FF、Chrome、Safari、Opera)

在 HTML 表格和 CSS 表格之间进行选择

对于表格数据(例如,数据网格),倾向于使用HTML 表格。在这种情况下,它在语义上更正确,并且可以更容易地理解源代码的性质,这可能有助于可访问性和 SEO(以及代码的可维护性)。

对于非表格数据(例如,一般布局),倾向于使用CSS 表格(如果浮动和 CSS 定位不充分)。它在语义上更正确,因为使用 HTML 表格会产生对表格数据的期望,并且它可能不会让屏幕阅读器和搜索引擎感到困惑。布局的具体用途包括垂直居中的内容和等高的列。

CSS 表格相对于 HTML 表格的一个特别优势是支持visibility:collapse,它允许行或列折叠(HTML 表格无法做到这一点)。如果需要表格数据的特定功能,请使用 CSS 表格。

于 2013-03-04T17:05:30.137 回答
0

您可以使用以下代码执行此操作:-

<div> using display:table-cell; vertical-align:middle
于 2013-03-04T06:09:09.193 回答
0

节省一些痛苦,只需将它们分成三个单独的容器。

#header {
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}
#content{
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}
#footer{
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}

<div id="header">test</div>
<div id="content">test</div>
<div id="footer">test</div>

溢出隐藏属性将使 div 自动展开以显示添加到其中的任何其他内容.. 使其行为更像一个表格单元格。

这是一个示例在此处输入链接描述

于 2013-03-04T14:10:28.810 回答