css垂直居中

？

我的代码到目前为止:

我试过"顶级:50%;" 和"vertical-align:middle;" 没有成功

编辑:好的,所以它已被讨论了很多.而且我可能会开始另一场迷你火焰战.但为了争论,我怎么用桌子做呢？到目前为止,我已经将css用于其他所有事情,所以我并不想尝试使用"良好实践".

编辑:内部div没有固定的高度

1> cletus..：

---

简而言之,你被塞满了.在最近的一个问题中有更多相关内容我问过你可以在不使用表的情况下进行HTML布局吗？ 基本上,CSS狂热分子需要掌握,并意识到只有一些事情你不能做(或不能做好)没有表.

这种反桌歇斯底里是荒谬的.

表格单元格可以很好地处理垂直居中,并且可以根据您的需要向后兼容.它们还比浮点数,相对/绝对定位或任何其他CSS类型方法更好地处理并排内容.

乔尔在" 不要让建筑宇航员吓唬你 "中创造(或至少推广)"建筑师宇航员"一词.那么,同样地,我认为术语"CSS宇航员"(或"CSS Space Cadet")同样合适.

CSS是一个非常有用的工具,但它也有一些非常严重的限制.我最喜欢的是编号列表可能只显示为"3".但不是"3)"或"(3)"(至少在CSS3生成内容之前 - 或者是CSS2.1？无论哪种方式都没有得到广泛支持).多么疏忽.

但比这更大的是垂直居中和并排布局.对于纯CSS来说,这两个领域仍然是一个巨大的问题.另一张海报决定了相对定位和负边距高度是要走的路.怎么会比这更好:

  
  





  
Inner

每次都可以在任何地方使用.

这是一篇关于CSS中垂直居中的文章.为了达到类似的目的,他们使用三个嵌套的div与相对+绝对+相对定位,以获得垂直居中.我很抱歉,无论是谁写的 - 以及任何认为这是一个好的迪亚的人 - 都已经失去了情节.

表格与CSS中给出了一个反驳:CSS Trolls begone.证据确实存在于布丁中.绝大多数前20名(Alexa)网站仍然使用表格进行布局. 有充分的理由.

因此,自己决定:您希望您的网站工作,花更少的时间让它工作吗？或者你想成为一名CSS宇航员？

---

对于其内容不是表格的布局目的,表格也是完全*不可接受的.你的表格布局支持者需要意识到它们只适用于一个问题而且设计失败的成本远不如失败语义那么严重.

---

如果开发人员需要花费5个小时才能获得语义正确的UI,那么使用表格需要大约10分钟才能解决问题.那个开发者应该告诉老板或客户什么？我必须做到这一点,所以请每小时支付100美元,这很重要吗？!

---

"失败的设计远不如失败的语义"......你认真对待那个吗？商业持有人可以吗？

---

annakata,我确定你是对的,但我选择了这个答案,因为它很容易,对我有用.在那里,我没有"高级家伙",如果我每次尝试以"正确"的方式做事,我什么也都做不了.

---

这实际上是一个糟糕的答案 正如其他人所指出的那样,标记在语义上应该是正确的,并且除表格数据外应避免使用表格.CSS通过使用display:table,display:table-cell等提供所有必要的解决方法,可以应用于任何html元素.

2> annakata..：

---

这不是一件容易的事,可能会有一些警告,而且这不是CSS在这一点上处理得好的东西.

然而,它被广泛讨论和可谷歌.这是一个很好的例子.

无论你做什么,请不要回到桌子上.

---

编辑:这很荒谬,以下在严格的文档中完美地运行,而不需要使用表格标记:

    

        

          Any text any height
        
    

---

赞成反桌狂热.你不能一方面说"这是非平凡的,可能会有警告,而且这不是CSS在这一点上处理得好的东西." 然后另一方面"哦,不要使用容易实现并且无处不在的解决方案".

---

鉴于我实际说的是有问题,但*这里*是你如何做到的,是的,我可以说.我从未在语义不如设计那么重要的地方工作,因为设计很容易调整,支持会随着时间的推移而发展,但破坏的标记总是会被打破标记.

3> Justin..：

---

我最喜欢这个解决方案.它适用于IE8 +,易于理解.

Centered Content

4> Jens Jansson..：

---

最高:50%; 应该管用.你需要将margin-top设置为负高度的一半,否则它将从中间开始.因此,您需要内部div的高度.你也可能需要职位:亲属;

对你来说这样的内心div.

position:relative;
top: 50%;
height:80px;
margin-top: -40px; /*set to a negative number 1/2 of your height*/

使用负尺寸不是很整洁(它甚至意味着什么？)但也许是最简单的方法.