与CSS垂直对齐

Question

是的,是的,我知道这是关于与CSS垂直对齐的另一个问题,它之前已经完成了一百万次.请放心,我已经多次遇到过这个问题,而且我已经完成了关于使用CSS垂直居中的各种方法的阅读.我在这里问,因为这些方法都没有做我想做的事情,而我只是想确保我的怀疑(CSS垂直对齐被破坏而不会做我想做的事情)绝对是正确的.

首先,这是我的测试用例:http://www.game-point.net/misc/testAlign/

这是标准:

• 我想垂直对齐'居中文本',相对于包含'TestTestTest ...'文本的DIV.
• 我不想指定任何高度.
• 我希望'TestTestTest'和'Centered text'DIV根据它们的文本数量和它们的宽度限制动态地获得它们的高度.
• 我不想使用Javascript.

即使在CSS3中,这似乎也是不可能的,更不用说CSS2了.令人讨厌的是我几乎就在那里; 该position:absolute; top:-50%;DIV工程设置DIV的顶部一半,容器DIV.问题是内部DIV,position:relative; top:-50%;没有做任何事情来将内容向上移动一半的高度,使其完全居中,因为CSS说绝对定位的DIV没有高度,因此top:-50%没有意义.据我所知,这只是CSS中的一个根本缺陷,没有特别的原因.一个绝对定位的元素确实有一个高度,我不知道为什么CSS假装它没有.我只是想问一下是否有人对我如何达到预期的效果有任何想法,如图所示我在上面列出的标准.具有讽刺意味的是IE6/7/8的'破碎'盒子模型,在怪癖模式下,给了我这种效果.很遗憾他们在IE9中'修复'它所以它不再存在了.

Answer 1

好吧,我的怀疑确实是正确的,这是不可能的(我认为这是CSS的一个缺陷,他们应该提供一种在DIV内垂直对齐的方法,而不指定内部元素的高度).

我最终得到的最不好的解决方案是:指定"中间"DIV的高度 - 即使用position:absolute并包含真实内容的DIV .我已经将它添加到测试用例页面http://www.game-point.net/misc/testAlign/,标题为"行高":100%和硬编码"中间"DIV高度.这个解决方案意味着你必须事先知道要垂直居中的内容的高度,这很糟糕,因为浏览器计算了这个并且您不需要指定它,但这是唯一的方法(直到CSS一起行动).我也用ems来指定高度,这样缩放文本就不会破坏垂直居中.事实证明,对于我所拥有的2行"中心文本",ems(至少在我的机器上).如果我要更改该内容的高度,或者它是动态更改为3行或1行,则父级div的硬编码em高度也必须更改.

所以,如果有人感兴趣,这里是我最终得到的代码:

    <div style="border:1px solid black; padding-left:60px; width:250px; position:relative; word-wrap:break-word;">
        TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
        <!-- Unfortunately, must set this DIV's height explicitly or the contained DIV's relative positioning won't work, as this DIV is considered to have NO implicit height -->
        <div style="position:absolute; display:block; top:50%; left:0px; height:2em;">
            <div style="position:relative; top:-50%; background-color:#00aa00; line-height:100%;">
                Centred text<br/>
                Centred text
            </div>
        </div>
    </div>