代码之家  ›  专栏  ›  技术社区  ›  esqew

为什么在CSS3中没有任何一种一次性的垂直居中方式?[已关闭]

  •  2
  • esqew  · 技术社区  · 12 年前

    看完之后 "In The Woods" blog post ,我想知道:

    为什么在CSS3中没有任何一种一次性的垂直居中方式?

    为什么我不能做一个 <div> 带有CSS属性 vertical-align: center 我的内容垂直居中吗?

    3 回复  |  直到 12 年前
        1
  •  3
  •   Zoltan Toth    12 年前

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

    browser support

        2
  •  2
  •   Jezen Thomas    12 年前

    这个名字可能有点混淆。css声明 vertical-align 不是用于在其父级中垂直居中某些内容(除非我们谈论的是表单元格)。相反,它是为了设置声明规则的元素的垂直对齐。

    如果您正在使用 inline-block 让一些元素挨着坐着并表现出来。

        3
  •  0
  •   Jared Farrish    12 年前

    你可能想支持 Flexible Box Layout Module 以下为:

    摘要

    该规范描述了为用户优化的CSS框模型 界面设计。在柔性布局模型中,柔性的子对象 容器可以在任何方向上放置,并且可以“弯曲”它们 尺寸,要么增加以填充未使用的空间,要么缩小以避免 溢出父对象。的水平和垂直对齐 孩子们很容易被操纵。这些盒子的嵌套(水平 内部垂直或垂直内部水平) 二维布局。

    注意 this from the proposed spec 以下为:

    flex容器为其 目录这与建立块格式化上下文相同, 除了使用了柔性布局而不是块布局之外:浮动不使用 侵入flex容器,而flex容器的边缘会 不会随着内容的边缘而崩溃。柔性容器形成 像块容器一样为其内容包含块。

    弹性容器不是块状容器 ,因此,一些基于块布局假设设计的属性不适用于 flex布局的上下文。特别是:

    • 所有 '列-*' Multicol模块中的属性对flex容器没有影响。
    • '浮动' “清除” 对弹性项目没有影响。
    • '垂直对齐' 对弹性项目没有影响。

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

    但我们可以抱有希望,不是吗?