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一起行动）。我使用em来指定高度，因此缩放文本不会破坏垂直居中。事实证明，对于我所拥有的2行“居中文本”，这个高度相当于2 em s（至少在我的机器上）。如果我要更改内容的高度，或者要动态更改为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>

Answer 2

使用margin-top:代替top:

等margin-top: -25%;

Answer 3

事情是，由于显而易见的原因，内容的垂直处理是这样做的，我相信你已经知道了。但是你有点试图解决一个无法解决的问题，这不是一个真正的问题。（当你知道为什么事情就像它们一样时才有意义）

通过使用绝对位置，您只是从自然流中获取内容。使用漂浮物和适当的尺寸或任何需要的东西制作一切都好得多，所以它会很好地降级并且在所有设备上看起来都很好看。然后在jquery中编写两行代码来检查高度并对齐所有内容（这也适用于“所有”设备）。没有JS的2-3％将需要与无聊的网站一起生活。

Answer 4

我已经开始使用以下代码了解某个地方......虽然需要工作。

基于http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

上的项目

请注意，您的代码以怪癖模式运行，我已将其更改为html 5

<!DOCTYPE HTML>
<html>
<head>
    <title>Vertical align test</title>
</head>

<style type="text/css">


#outer { overflow: hidden; position: relative; border: 1px solid red; }
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {position: relative; display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%; width: 100px} /* for explorer only */
/* optional: #inner[id] {position: static;} */

</style>

<body>
<h1>New test</h1>

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text<br>
      any height<br>
      any content, for example generated from DB<br>
      everything is vertically centered
    </div>

  </div>

test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
</div>


</body>
</html>

Answer 5

.item {
    height: 40px;
    top: 50%;
    margin-top: -20px;
}

位置相对或绝对;

与CSS垂直对齐

5 个答案: