没有回复
涉水轻舟
涉水轻舟 头像
Offline
Joined: 01-20
多行文本垂直居中

我们已经知道单行文本可以采用行高与高度一致来实现,但是多行文本该怎么实现呢?

Html代码:
 <div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>


CSS代码:
<style type="text/css">
#outer {height: 40px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static; >margin-top:20px!important;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static; >float:left!important!;}

#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
</style>

为了使自己对生活发生兴趣,我一直在努力……