css 文字自動換行並垂直置中div效果

來源:互聯網
上載者:User
提示:您可以先修改部分代碼再運行

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>demo</title> <style type="text/css"> .box { position: relative; width: 500px; height: 300px; border: 1px solid #FFF; background-color: #999; display: table; } .wrap{ display: table-cell; vertical-align: middle; *position:absolute; *top: 50%; *left: 0; } .content { *position: relative; *top: -50%; *left: 0; } </style> </head> <body> <div class="box"> <div class="wrap"> <p class="content"> 我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行 固定寬度的文字自動換行並垂直劇中">固定寬度的文字自動換行並垂直劇中 </p> </div> </div> <div class="box"> <div class="wrap"> <p class="content"> 是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行 </p> </div> </div> </body></html></td> </tr></table>
提示:您可以先修改部分代碼再運行
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.