CSS多行文本垂直居中

最新推荐文章于 2024-07-31 16:33:26 发布

weixin_33758863

最新推荐文章于 2024-07-31 16:33:26 发布

阅读量136

点赞数

今天需要将文本垂直居中，就是一行是垂直居中，多行也是垂直居中。

效果如下

实现代码（同事提供）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .listDiv{
            display: flex;
            width: 300px;
            height: 60px;
            padding: 10px;
            background: #ccc;
            margin-bottom: 10px;
        }
        .listDivLeft{
            flex:1;
            height: 60px;
            overflow: hidden;
        }
        .listDivLeft span{
            display: table-cell;
            height: 60px;
            line-height: 30px;;
            vertical-align: middle;
            text-decoration: none;
        }
        .listDivRight{
            padding-left: 10px;
        }
        .listDivRight img{
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
    <div class="listDiv">
        <div class="listDivLeft">
            <span>我是一条很长很长的文字，不信你看，哎呦，还是真是，玩不了叻。</span>
        </div>
        <div class="listDivRight">
            <img src="http://images.cnblogs.com/cnblogs_com/lovesong/508505/t_f.jpg"/>
        </div>
    </div>
    <div class="listDiv">
        <div class="listDivLeft">
            <span>我就只一行，没有了。</span>
        </div>
        <div class="listDivRight">
            <img src="http://images.cnblogs.com/cnblogs_com/lovesong/508505/t_f.jpg"/>
        </div>
    </div>
</body>
</html>