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

我在垂直对齐容器中的物品时遇到了很多麻烦

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

由于各种原因，这导致了各种各样的问题，我不想讨论，但我想选择一个新的要求：不要将其包装在另一个容器中

这使我想到了这个解决方案（为简洁起见，样式内联）：

我的内容

或者这个：

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

我的内容

我喜欢第一个选项胜过第二个选项，因为在第二个类中，“为什么在其他内容中间有一个表单元，它独立于一个表？”

我之所以犹豫使用第一个选项，是因为我不确定它是否能在所有浏览器中工作。我也可以对第二种选择说同样的话

---

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

要使内容垂直居中，而不嵌套其他包装器，您只需使用

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>

我的内容

请注意，尽管div中的文本似乎没有容器，但从技术上讲，当div成为flex容器时，文本将被包装在成为flex项的容器中。这就是CSS的工作原理。如果您不将内容包装在HTML元素中，CSS将创建

---

你写道：

我更喜欢第一个选项而不是第二个，因为第二个选项 “为什么”在这个中间有一个表单元？ 独立于表的内容

我犹豫使用第一个选项的原因是因为我没有 当然，它可以在所有浏览器中运行。我可以对 第二种选择也是如此

从功能角度来看，以下各项之间没有区别：

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

我的内容

及

我的内容

两者的作用相同。原因如下：

HTML元素，包括

div

和

td

，在浏览器将样式应用于

因此，

td

充当表格单元格的唯一原因是浏览器的默认样式表指定了

td{display:table cell；}

通过使用自己的

display:table单元格

覆盖浏览器的

display:block

，对

div执行相同的操作

因此，就功能而言，它实际上是一样的，所有播放器–
div
，
td
，
显示：表格单元格
和
垂直对齐：中间
都至少回到了IE6

但是，对flexbox的浏览器支持尚未完成。flexbox是CSS3，所有主要浏览器都支持。一些最新的浏览器版本（如Safari 8和IE10）需要。要快速添加所需的所有前缀，请在此处发布CSS:


旁白：

HTML元素没有固有的样式
它们本身不携带样式。只有当它们通过浏览器时，
display
和其他CSS属性才会被应用

基于此,
似乎只有HTML元素的框是基于
它们的标签名上有
、
和

要使内容垂直居中，而不嵌套其他包装器，只需使用

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>

我的内容


请注意，尽管div中的文本似乎没有容器，但从技术上讲，当div成为flex容器时，文本将被包装在一个成为flex项的容器中。CSS就是这样工作的。如果您不将内容包装在HTML元素中，CSS将创建


你写道：

我更喜欢第一个选项而不是第二个，因为第二个选项
“为什么”在这个中间有一个表单元？
独立于表的内容

我犹豫使用第一个选项的原因是因为我没有
当然，它可以在所有浏览器中工作。我也可以这样说
第二种选择也是如此

从功能角度来看，以下各项之间没有区别：

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

我的内容

及

我的内容

两者都做同样的事情。原因如下：

HTML元素，包括
div
和
td
，在浏览器将样式应用于

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

通过使用自己的
display:table单元格
覆盖浏览器的
display:block
，对
div执行相同的操作

因此，就功能而言，它实际上是一样的，所有播放器–
div
，
td
，
显示：表格单元格
和
垂直对齐：中间
都至少回到了IE6

但是，对flexbox的浏览器支持尚未完成。Flexbox是CSS3，所有主要浏览器都支持它。一些最新的浏览器版本，如Safari 8和IE10，需要。要快速添加所需的所有前缀，请在此处发布CSS:


旁白：

HTML元素没有固有的样式。换句话说，标记名
他们自己没有风格。直到他们通过浏览器时，才会应用
显示
和其他CSS属性。（见附件。）

基于此,
似乎只有HTML元素的框是基于
它们的标签名上有
、
和

大约97%的浏览器支持CSS表，并且具有良好的向后兼容性，请参阅

我会毫不犹豫地使用CSS表