垂直在CSS中对齐元素 [英] Vertical Align an element in CSS

问题描述

尊敬的专家，我试图通过CSS将一个段落对齐到一个div元素的中间，而且我无法使其工作。

Dear experts, I was trying to align an paragraph to the middle of an division element via CSS and I somehow can't get it to work.

 <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中使用，

It doesn't work in IE nor firefox,

推荐答案

这里是好的hackish示例，我把IE css在条件，而不是隐藏它与黑客，其他那么好。

Here's a nice hackish example, i'd put the IE css in conditionals instead of hiding it with hacks, other that that nice.

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

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