2

读完这篇“在树林里”的博文后，我想知道：

为什么 CSS3 中没有一种单一的垂直居中方式？

为什么我不能只<div>使用 CSS 属性vertical-align: center来让我的内容垂直居中？

4

3 回答 3

3

vertical-align: center如果您制作容器，则可以使用display: table-cell

浏览器支持

于 2012-09-25T00:10:46.043 回答
2

这个名字可能有点混乱。css 声明vertical-align不适用于将某些内容垂直居中于其父级中（除非我们谈论的是表格单元格）。相反，它用于设置声明规则的元素的垂直对齐方式。

如果您正在使用inline-block让一些元素彼此相邻并表现出来，这将非常有用。

于 2012-09-25T00:13:45.890 回答
0

您可能希望支持灵活框布局模块：

抽象的

该规范描述了针对用户界面设计优化的 CSS 框模型。在 flex 布局模型中，flex 容器的子级可以在任何方向上布局，并且可以“伸缩”它们的大小，要么增长以填充未使用的空间，要么缩小以避免溢出父级。孩子的水平和垂直对齐都可以很容易地操作。这些框的嵌套（水平内垂直，或垂直内水平）可用于构建二维布局。

并从提议的规范中注意这一点：

弹性容器为其内容建立一个新的弹性格式化上下文。这与建立块格式化上下文相同，只是使用 flex 布局而不是块布局：浮动不会侵入 flex 容器，并且 flex 容器的边距不会与其内容的边距一起折叠。Flex 容器为它们的内容形成一个包含块，就像块容器一样。

弹性容器不是块容器，因此一些在块布局假设下设计的属性不适用于弹性布局的上下文。尤其：

  • Multicol 模块中的所有'column-*'属性都对 flex 容器没有影响。
  • 'float'和'clear'对弹性项目没有影响。
  • 'vertical-align'对弹性项目没有影响。

请记住，这个规范还很早，并且已经替换了以前的版本（被这个）。因此，它试图解决一些似乎应该“解决”的常见布局问题，现在开始称它为可行的显然还为时过早。

但我们可以希望，不是吗？

于 2012-09-25T00:24:39.047 回答