多行文字的垂直居中

来源：互联网发布：越狱手机清除所有数据编辑：程序博客网时间：2024/06/05 18:44

多行文字的垂直居中，重点外层用了table-cell,内层用了inline-block

<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>My Demo 1</title>  </head>  <style>    li{margin-bottom: 20px;width: 300px; background:#F1F5F8;}    .demobox{display:table-cell;vertical-align:middle;width:140px;height:300px;}    .demospan{display:inline-block;vertical-align:middle;}</style><body>      <ul>        <li>            <div class="demobox"><span class="demospan">教育政府教育政府教育政府教育政府教育政府</span></div>        </li>        <li>            <div class="demobox"><span class="demospan">府教育政府教育政府教育政府</span></div>        </li>        <li>            <div class="demobox"><span class="demospan">33333教育政府教育政府教育政府教育政府教育政府</span></div>        </li>        <li>            <div class="demobox"><span class="demospan">4444教育政府教育政府教育政府教育政府教育政府4444教育政府教育政府教育政府教育政府教育政府</span></div>        </li>        <li>            <div class="demobox"><span class="demospan">5555教育政府教育政府教育政府教育政府教育政府</span></div>        </li>        <li>            <div class="demobox"><span class="demospan">66666教育政府教育政府教育政府教育政府教育政府66666教育政府教育政府教育政府教育政府教育政府66666教育政府教育政府教育政府教育政府教育政府66666教育政府教育政府教育政府教育政府教育政府</span></div>        </li>    </ul></body>  </html>

0 0