多行文字的垂直居中

多行文字的垂直居中,重点外层用了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>  

你可能感兴趣的:(多行文字的垂直居中)