与CSS垂直对齐

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

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

这里的标准：

我要对齐的“居中文本”垂直，相对于含“TestTestTest的DIV ... '文本。
我不想指定任何高度。
我希望'TestTestTest'和'居中文本'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，所以它不会了。

来源

2011-01-20 Jez

好了，你可以随时使用jQuery做的魔力。但据我所知，你的怀疑可能是正确的。 – 2011-01-20 11:27:31

认为你现在可以用flexbox做到这一点http://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Ruskin 2015-01-12 14:21:09

OK，我的怀疑的确是正确的，这是不可能的（我认为这是CSS中的一个缺陷，他们应该提供一种在DIV中垂直对齐的方式，而不指定内部元素高度）。

我最后得到的最坏的解决方案是这样的：指定“中间”DIV的高度 - 即使用position:absolute显示并包含真实内容的DIV。我已将它添加到测试案例页面http://www.game-point.net/misc/testAlign/，标题为使用行高度：100％，硬编码“中”DIV高度。这个解决方案意味着你必须事先知道内容的高度是垂直居中的，这很吸引人，因为浏览器计算这个值，你不需要指定它，但它是唯一的方法（直到CSS一起行动）。我使用em s来指定高度，以便放大和缩小文本不会破坏垂直居中。结果发现，对于我的两行'居中文本'，这个高度恰好等于2 em（至少在我的机器上）。如果我要改变内容的高度，或者动态改变为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>

来源

2011-02-01 10:29:58 Jez

-3

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

位置相对或绝对;

来源

2011-01-20 10:30:20 jcubic

OP：“我不想指定任何高度。” – kapa 2011-01-20 10:31:26

“top：50％”的解决方案只能在指定的高度下工作。 – jcubic 2011-01-24 01:07:49

还有其他解决方案使用边距设置为自动，但我认为它也需要指定的高度。 – jcubic 2011-01-24 02:23:07

使用margin-top:，而不是像top:margin-top: -25%;

来源

2011-01-20 10:41:05 ilyast

的事情是，虽然内容是垂直的处理是由这样的原因很明显，这一点我敢肯定，你已经知道的。但是你有点想解决一个无法解决的问题，那不是一个真正的问题。（当你知道为什么事情是这样的时候有意义）

通过使用绝对位置，你只是将内容从自然流程中提取出来。把所有东西都制作成漂浮物和适当的尺寸或者需要的任何东西都好得多，所以它可以很好地降解，并且在所有设备中看起来都不错。然后在jquery中写两行代码来检查高度并对齐所有内容（这也适用于“所有”设备）。没有JS的2-3％将需要忍受无聊的网站。

来源

2011-01-20 13:05:52 plebksig

我已经开始使用下面的代码得到某处......但需要工作。

基于对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>

来源

2011-01-20 14:53:12 Ruskin

与CSS垂直对齐

回答

相关问题