与CSS垂直对齐

问题描述

是的，是的，我知道这是另外一个与CSS垂直对齐的问题，之前已经完成了一百万次。放心，我已经遇到过这个问题很多次了，我已经完成了关于CSS垂直居中的各种方法的阅读。我在这里问，因为没有任何方法做我想做的事情，我只是想确保我的怀疑（CSS垂直对齐被打破，不会做我想做的事）是绝对正确的。首先，这里是我的测试案例：

以下是标准：

• 我想垂直对齐居中的文字，相对于包含TestTestTest ...文字的DIV。
  
• 我不希望指定任何高度。
  
• 我希望TestTestTest和居中文本DIV根据文本数量动态调整高度，它们的宽度限制。
  
• 我不想使用Javascript。
  
  
  

  似乎甚至在CSS3是不可能的，更不用说CSS2了。令人讨厌的是我几乎在那里; 位置：绝对;顶部：-50％; DIV将DIV的顶部设置到容器DIV的中间位置。问题在于内部的DIV，风格 position：relative;上面：-50％; 没有做任何事情把内容向上移动一半，以便完全居中，因为CSS表示绝对定位的DIV没有高度，因此 top：-50％是没有意义的。据我所知，这只是CSS中的一个基本缺陷，没有特别的理由。一个绝对定位的元素有一个高度，我不知道为什么CSS假装它没有。我只想问一下，如果我有什么想法可以达到预期的效果，请参阅上文所述的标准。具有讽刺意味的是，IE6 / 7/8的破盒模型在怪异模式下给了我这个效果。好吧，我怀疑的确是正确的，而且我也不知道，这是不可能的（我认为这是一个CSS的缺陷，他们应该提供一个DIV内的垂直对齐方式，而不指定内部元素高度）。
  
  

  最不好的解决方案我最后是这样的：指定中间DIV的高度 - 也就是使用位置：绝对显示的DIV，并包含真实内容。我已经将它添加到了测试用例页面：，标题为线高= 100％，硬编码为中的DIV高度。这个解决方案意味着你必须事先知道内容的高度是垂直居中的，这很吸引人，因为浏览器计算这个值，你不需要指定它，但是这是唯一的方法（直到CSS一起行动）。我使用 em s来指定高度，所以放大和缩小文本不会破坏垂直居中。结果发现，对于2行居中文本，这个高度恰好等于2 em s（至少在我的机器上）。如果我要改变内容的高度，或者动态地改变为3行或1行，则父节点 div 的硬编码 em height也必须改变。
  
  

  所以，如果有人感兴趣的话，我最终得到的代码是：
  
  

   < div style =border：1px solid black; padding-left：60px; width：250px; position：relative; word-wrap：break-word; > 
   TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest 
   < div style =position：absolute; display：block; top：50％; left：0px; height：2em;> 
  < div style =position：relative; top：-50％; background-color：＃00aa00; line-height：100％;> 
  居中文字< br /> 
  居中文本
  < / div> 
  < / div> 
  < / div> 
    

  
  

  Yeah, yeah, I know this is yet another question about vertical alignment with CSS and it's been done a million times before. Rest assured that I have come across this problem many times and I've already done the reading about various ways to centre vertically with CSS. I'm asking here because none of those ways do quite what I want to do, and I just want to make sure that my suspicion (that CSS vertical alignment is broken and will not do what I want it to do) is definitely correct.

  First up, here's my test case: http://www.game-point.net/misc/testAlign/

  Here's the criteria:

  • I want to align the 'centred text' vertically, with respect to the DIV containing the 'TestTestTest...' text.
  • I don't want to specify ANY heights.
  • I want both the 'TestTestTest' and the 'Centred text' DIVs to get their heights dynamically, according to the amount of text they have, and the width limit they have.
  • I don't want to use Javascript.

  This seems to be impossible even in CSS3, let alone CSS2. The annoying thing is that I'm almost there; the position:absolute; top:-50%; DIV works to set the top of that DIV to halfway down the container DIV. The problem is that the inner DIV, with style position:relative; top:-50%; doesn't do anything to move the content up by half its height, to centre it fully, because CSS says that an absolutely positioned DIV doesn't have a height and therefore top:-50% is meaningless. As far as I can tell, this is just a fundamental flaw in CSS for no particular reason. An absolutely positioned element does have a height, and I don't know why CSS pretends it doesn't. I just wanted to ask whether anyone had any ideas as to how I could achieve the desired effect, pictured at the bottom, given the criteria I outlined above. Ironically IE6/7/8's 'broken' box model, in quirks mode, gives me this very effect. Shame they're 'fixing' it in IE9 so it won't anymore.

  解决方案

  OK, my suspicion was indeed correct and this is not possible (I think it's a flaw in CSS and they should provide a means of vertical alignment within a DIV without specifying inner element heights).

  The least bad solution I ended up with was this: specify the height of the 'middle' DIV - that is, the DIV which is displayed using position:absolute and contains the real content. I've added it to the test case page at http://www.game-point.net/misc/testAlign/ under the heading With line-height:100% and hardcoded 'middle' DIV height. This solution means that you must know the height of the content to be vertically centred in advance, which sucks because the browser calculates this and you shouldn't need to specify it, but it's the only way (until CSS gets its act together). I used ems to specify the height too, so that zooming text in and out doesn't ruin the vertical centring. Turns out that for the 2 lines of 'Centred text' I had, this height equates to exactly 2 ems (at least on my machine). If I were to change that content's height, or it were to change dynamically to say 3 lines or 1 line, the parent div's hardcoded em height would also have to change.

  So, here's the code I finally ended up with if anyone's interested:

      <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>
  

  这篇关于与CSS垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！