CSS多行文本垂直居中

顺晟科技

2022-09-14 10:52:11

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

效果如下

实现代码（同事提供）

<!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/likecs_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/likecs_com/lovesong/508505/t_f.jpg"/>
        </div>
    </div>
</body>
</html>

演示地址

http://htmlpreview.github.io/?https://github.com/codingforme/code-learn/blob/master/css-demo/multi-row-text-middle.html

上一篇：CSS杂集（标准流&多行垂直居中）下一篇：CSS-多行文本垂直居中

网站建设

Css

CSS多行文本垂直居中