垂直对齐CSS中的元素答案

【问题标题】：Vertical Align an element in CSS垂直对齐CSS中的元素
【发布时间】：2014-11-15 19:43:44
【问题描述】：

尊敬的专家，我试图通过 CSS 将段落与分割元素的中间对齐，但不知何故无法正常工作。

 <style type="text/css">
    .wrap{
background:red;
height: 5em;  
     }
     p{
     background:blue; 
        height: 2em; 
vertical-align:middle; 

      }
  </style>


<div class="wrap">
    <p>
    ALIGN TEXT
    </p>
</div>

IE 和 firefox 都不行，

【问题讨论】：

标签： html css

【解决方案1】：

  <div style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>

【讨论】：

【解决方案2】：

http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
“适用于：内联级和'table-cell'元素”

http://phrogz.net/CSS/vertical-align/

【讨论】：

但是
虽然不是内联元素
没错，它是块，所以 vertical-align 属性不适用于它。

【解决方案3】：

您也可以使用 vertical-align:middle、display:inline-block 和一个 100% 高度的空内联元素：

http://jsfiddle.net/HVtuD/

<div id='container'>
  <div id='text'>vertical-align + inline-block<br>trick<br>in action</div>
</div>

#container{
  height: 300px;border: 1px solid black;text-align:center;
}
#text,#container:before{
  vertical-align: middle;
  display: inline-block;
}
  #container:before{
  content: "";
  height: 100%;
  width: 0%;
}

【讨论】：

【解决方案4】：

如果没有表格，或者不使用 Javascript，就不可能垂直对齐任何东西。

【讨论】：

这是一个经典的领域之一，教那些习惯于使用表格进行布局的人开始使用 CSS 会遇到巨大而可怕的火车事故。 CSS 很强大，但它的缺点很明显，而且它的特性也很多。