Html CSS的垂直对齐_Html_Css_Internet Explorer_Firefox_Vertical Alignment

Html CSS的垂直对齐

html css internet-explorer firefox

Html CSS的垂直对齐,html,css,internet-explorer,firefox,vertical-alignment,Html,Css,Internet Explorer,Firefox,Vertical Alignment,是的，是的，我知道这是关于CSS垂直对齐的另一个问题，以前已经做过一百万次了。请放心，我已经多次遇到这个问题，并且已经阅读了有关使用CSS垂直居中的各种方法。我在这里问这个问题是因为这些方法都没有达到我想要的效果，我只是想确保我的怀疑（CSS垂直对齐被破坏了，不会达到我想要的效果）是绝对正确的首先，这是我的测试用例：以下是标准：我想将“居中文本”与包含“testtest…”文本的DIV垂直对齐我不想指定任何高度我希望“test”和“centeredtext”div都能根据它们拥有的文

是的，是的，我知道这是关于CSS垂直对齐的另一个问题，以前已经做过一百万次了。请放心，我已经多次遇到这个问题，并且已经阅读了有关使用CSS垂直居中的各种方法。我在这里问这个问题是因为这些方法都没有达到我想要的效果，我只是想确保我的怀疑（CSS垂直对齐被破坏了，不会达到我想要的效果）是绝对正确的

首先，这是我的测试用例：

以下是标准：

我想将“居中文本”与包含“testtest…”文本的DIV垂直对齐
我不想指定任何高度
我希望“test”和“centeredtext”div都能根据它们拥有的文本量和宽度限制动态地获得它们的高度
我不想使用Javascript

即使在CSS3中，这似乎也是不可能的，更不用说CSS2了。恼人的是我就快到了；

位置：绝对位置；前-50%

DIV用于将该DIV的顶部设置为容器DIV的一半。问题是内部DIV的样式

position:relative；前-50%

不会将内容向上移动一半高度，使其完全居中，因为CSS说绝对定位的DIV没有高度，因此

top:-50%

毫无意义。就我所知，这只是CSS中的一个基本缺陷，没有什么特别的原因。一个绝对定位的元素确实有高度，我不知道为什么CSS假装它没有。我只是想问，根据我上面概述的标准，是否有人对我如何达到预期效果有任何想法，如下图所示。具有讽刺意味的是，IE6/7/8的“坏”盒子模型，在怪癖模式下，给了我这种效果。遗憾的是，他们在IE9中“修复”了它，所以它不会再出现了

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

相对或绝对位置

使用

margintop:

而不是

top:

像

margintop:-25%
问题在于，内容的垂直处理之所以采用这种方式，显然是有原因的，我相信您已经意识到了这一点。但你是在试图解决一个无法解决的问题，那不是真正的问题。（当你知道事情为什么是这样时，这是有道理的）
通过使用绝对位置，您只是从自然流中提取内容。最好是使用浮动和适当的大小或任何需要的东西使一切都像它应该的那样，这样它会很好地退化，在所有设备中看起来都很好。然后在jquery中编写两行代码来检查高度并对齐所有内容（这也适用于“所有”设备）。没有JS的2-3%的人将需要与无聊的网站共处。
我已经开始使用以下代码。。。虽然需要工作
基于在上找到的项目
注意，您的代码在怪癖模式下运行，我已将其更改为HTML5
<!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>


垂直对齐测试
#外部{溢出：隐藏；位置：相对；边框：1px实心红色；}
#外部[id]{显示：表；位置：静态；}
#中间{位置：绝对；顶部：50%；}/*仅限explorer*/
#中间[id]{位置：相对；显示：表格单元格；垂直对齐：中间；宽度：100%；}
#内部{位置：相对；顶部：-50%；宽度：100px}/*仅适用于浏览器*/
/*可选：#内部[id]{位置：静态；}*/
新测试
任何文本

任意高度

任何内容，例如从DB生成的内容

一切都垂直居中
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
好的，我的怀疑确实是正确的，这是不可能的（我认为这是CSS中的一个缺陷，它们应该提供一种在DIV中垂直对齐的方法，而不指定内部元素高度）
我得到的最简单的解决方案是：指定“中间”DIV的高度，即使用position:absolute
显示并包含真实内容的DIV。我已经将它添加到测试用例页面的标题下，行高：100%，硬编码为“中间”DIV height。这个解决方案意味着您必须事先知道内容的高度要垂直居中，这很糟糕，因为浏览器会计算这个高度，您不需要指定它，但这是唯一的方法（直到CSS将其动作结合起来）。我还使用了em
s来指定高度，这样放大和缩小文本不会破坏垂直居中。事实证明，对于我的两行“居中文本”，这个高度正好等于2em
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>


测试测试
居中文本

居中文本
OP：“我不想指定任何高度。”另外还有一种解决方案，使用边距设置为“自动”，但我认为它也需要指定高度。这很好，但不考虑中间框的高度变化。因为它应该是动态的，这可能是个问题。有趣的是。。。什么是th