Question

我在垂直对齐容器中的项目时遇到了很多麻烦。

我已经实施了很多建议。所有这些都建议将内容包装在另一个div或容器中。

由于各种原因导致出现各种各样的问题，但我不想选择新的要求：它不会被包装在另一个容器中。

这引导我找到这个解决方案（样式内联简洁）：

<div style="display:table-cell;vertical-align:middle">my content</div>

或者这个：

<td style="vertical-align:middle">my content</td>

我喜欢第一个选项而不是第二个选项，因为第二个选项更适合你，“为什么在这个其他内容的中间有一个Table Cell独立于一个表？”

我对使用第一个选项犹豫不决的原因是因为我不确定它是否适用于所有浏览器。我也可以对第二个选项说同样的话。

哪个选项在语义和浏览器支持方面更好？

Answer 1

要垂直居中内容，无需嵌套其他包装，您只需使用flexbox。

<强> CSS

div {
    display: flex;
    align-items: center;       /* center content vertically, in this case */
    justify-content: center;   /* center content horizontally, in this case (optional) */
}

<强> HTML

<div>my content</div>

DEMO

请注意，尽管div中的文本似乎没有容器，但从技术上来说，当div成为弹性容器时，文本会被包含在成为弹性项目的anonymous container中。这就是CSS的工作原理。如果您不将内容包装在HTML元素中，CSS将创建anonymous block or inline boxes。

您写道：

我喜欢第一个选项而不是第二个选项，因为第二个选择你   go，＆＃34;为什么Table Cell位于另一个中间   独立于表格的内容？

我对使用第一个选项犹豫不决的原因是因为我没有   确定它适用于所有浏览器。我可以说同样的   第二种选择。

从功能角度来看，之间没有区别：

<div style="display:table-cell;">my content</div>

和

<td>my content</td>

两者都做同样的事情。这就是原因：

HTML元素（包括div和td）没有display值，直到浏览器应用带有default stylesheet 的样式。

因此，td充当表格单元格的唯一原因是因为浏览器的默认样式表指定了td { display: table-cell; }。

您通过使用自己的div覆盖浏览器display: block来对display: table-cell执行相同的操作。

所以在功能和所有玩家方面真的是一样的 - div，td，display: table-cell和vertical-align: middle都是supported by all browsers回到至少IE6。

然而，对于flexbox的浏览器支持尚未完成。 Flexbox是CSS3，受所有主流浏览器except IE 8 & 9支持。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在此处发布您的CSS：Autoprefixer。

暂且不说：

HTML元素没有固有的样式。换句话说，标签名称   他们自己不带风格。直到他们浏览display并应用其他CSS属性的浏览器为止。（见HTML Default Stylesheet。）

基于此MDN Bug Report，它   似乎唯一的HTML元素是基于框架构建的   标记名称为<button>，<fieldset>和<legend>。

Answer 2

大约97％的浏览器支持CSS表，并具有良好的向后兼容性，请参阅http://caniuse.com/#feat=css-table

我会毫不犹豫地使用CSS表格，你的例子是完全合理的。

如何在不嵌套其他容器的情况下垂直对齐内容？

2 个答案: