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文本属性
15 0
|
1月前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
9天前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
|
17天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
24 1
|
1月前
|
前端开发
css文本垂直展示------
css文本垂直展示------
17 1
css文本垂直展示------
|
1月前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
1月前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
1月前
|
前端开发
css flex布局两个元素水平居中垂直居中
css flex布局两个元素水平居中垂直居中
24 1
|
1月前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
13 0
|
1月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
37 2