如何在页眉和页脚 div 之间垂直对齐内容 div? [英] How do I vertically align a content div between a header and footer div?

问题描述

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

解决方案

垂直居中内容

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

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

在这种情况下，现代方法是使用 CSS 表格，这相当于 HTML 表格.但是，如果需要支持 IE7 或更早版本，请改用 HTML 表格.Flexbox 不适合这种特殊情况，并且 IE9 及更早版本不支持它.CSS网格目前仅支持IE10，标准尚未最终确定.

CSS 表格的基本用法是:

HTML

<div class="row"><div class="cell">内容</div>

CSS

.table {display: table;}.row {显示:表格行；}.cell {显示:表格单元格；}

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

• HTML 表格
• CSS 表格

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

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

对于非表格数据(例如，一般布局)，最好使用CSS 表格(如果浮动和 CSS 定位不够用).它在语义上更正确，因为使用 HTML 表格创建了对表格数据的期望，并且屏幕阅读器和搜索引擎可能不那么混淆.布局的具体用途包括垂直居中的内容和等高的列.

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

I have three rows of primary divs in my template. I have a header, a content wrapper, and a footer. The header butts right up against the top and the footer against the bottom. I have a content wrapper div in between the two. I basically want to center the content wrapper vertically within the two divs. The content div will always be a dynamic height, so the line-height method won't work for me. What would be the best method for me to use for this?

解决方案

Vertically centering content

Without using JavaScript, there's a limited number of ways to vertically center dynamic content:

1. HTML tables
2. CSS tables
3. CSS3 flexbox
4. CSS3 grids

In a case like this, the modern approach is to use CSS tables, which is equivalent to HTML tables. But if support for IE7 or earlier is needed, then use HTML tables instead. Flexbox isn't a good fit in this particular case, and it's not supported by IE9 and earlier. CSS grids are only supported by IE10 at present, and the standard hasn't been finalized.

The basic usage of CSS tables is:

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;}

Demos   (tested in: IE8/9/10, FF, Chrome, Safari, Opera)

• HTML tables
• CSS tables

Choosing between HTML tables and CSS tables

For tabular data (e.g., a grid of data), favor using HTML tables. It's more semantically correct in this case, and the nature of the source code can be more easily understood, which may help with accessibility and SEO (and the maintainability of the code).

For non-tabular data (e.g., general layout), favor using CSS tables (if floats and CSS positioning are not adequate). It's more semantically correct, since the use of HTML tables creates an expectation of tabular data, and it may be less confusing to screen readers and search engines. Specific uses for layout include vertically-centered content and equal-height columns.

One particular advantage of CSS tables over HTML tables is the support for visibility:collapse, which allows rows or columns to collapse (something not doable with HTML tables). If there's a need for that specific feature for tabular data, use CSS tables.

这篇关于如何在页眉和页脚 div 之间垂直对齐内容 div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！