多行文字的垂直居中

最新推荐文章于 2023-03-19 21:40:22 发布

雨里去

最新推荐文章于 2023-03-19 21:40:22 发布

阅读量804

点赞数

分类专栏： web前端前端－css样式

本文链接：https://blog.youkuaiyun.com/abeetle/article/details/39398701

版权

web前端同时被 2 个专栏收录

35 篇文章

订阅专栏

前端－css样式

15 篇文章

订阅专栏

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