CSS多行文本垂直居中

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

效果如下

实现代码（同事提供）

<!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>

演示地址

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

posted @ 2017-08-11 23:41 海角在眼前阅读(702) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

海角在眼前

我愿化身石桥，受五百年风吹，五百年日晒，五百年雨淋，只求她从桥上经过

CSS多行文本垂直居中

公告

积分与排名

随笔分类

随笔档案

阅读排行榜

推荐排行榜