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



本文转自 海角在眼前 博客园博客,原文链接:  http://www.cnblogs.com/lovesong/p/7348442.html ,如需转载请自行联系原作者

相关文章
|
1月前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
1月前
|
前端开发
css文本属性
css文本属性
18 0
|
4天前
|
前端开发 容器
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
|
18天前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
|
1月前
|
前端开发
css文本垂直展示------
css文本垂直展示------
19 1
css文本垂直展示------
|
21小时前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
21小时前
|
移动开发 前端开发 HTML5
CSS3 文本相关属性
CSS3 文本相关属性
|
26天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
28 1
|
1月前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
1月前
|
前端开发
css flex布局两个元素水平居中垂直居中
css flex布局两个元素水平居中垂直居中
27 1