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>
演示地址
CSS多行文本垂直居中的更多相关文章
- css多行文本垂直居中问题研究
css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...
- css 文本和div垂直居中方法汇总
https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...
- CSS元素和文本垂直居中
div居中 1.使用绝对定位和负外边距让块级元素垂直居中 要点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中. <div id="box"> <di ...
- css样式让input垂直居中
css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- css样式之vertical-align垂直居中的应用
css样式之vertical-align垂直居中的应用:将图片垂直左右居中 元素垂直居中 1:必须给容器父元素加上text-align:center 2:必须给当前元素转换成行内块元素,display ...
- CSS布局：元素垂直居中
CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握 ...
- css知识笔记：垂直居中（别只看，请实操！！！）
css实现元素的垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的, ...
随机推荐
- SpringBoot系列——WebSocket
关于websocket的介绍与实现,我之前写过一篇博客,记录了用springboot-websocket实现了私聊.群聊的简单实例,这里就只提供一个入口,不再重复的写了,WebSocket+Java ...
- JDK源码分析（一）—— String
dir 参考文档 JDK源码分析(1)之 String 相关
- vue-element-admin项目install出现的问题
1.需要安装nodejs和git 2. 配置淘宝镜像源(经常是因为墙的原因下载缓慢或者出错) npm config set registry https://registry.npm.taobao.o ...
- dll 已注册 检索 COM 类工厂中 CLSID 为 {XXXX-XXXX-XXX-XXXXX-XXX} 的组件时失败，原因是出现以下错误: 80040154。
前几天碰到的问题,错误提示“ 检索 COM 类工厂中 CLSID 为 {XXXX-XXXX-XXX-XXXXX-XXX} 的组件时失败,原因是出现以下错误: 80040154.”,然而dll已注册,注 ...
- js 原生手写AJAX
前言:最近在学习react,在练习中模拟一个button通过AJAX向后台发送POST请求,懒得引入AXIOS,就顺便练习了js原生ajax. 正文: 注:我忽略了IE6及以下版本 submit(){ ...
- thinkphp 3.2 去除调试模式后报错，怎么解决
1.案例一: 最近用ThinkPHP开发一个项目,本地开发测试完成上传到服务器后,第一次打开正常,再刷新页面时就出现 “页面调试错误,无法找开页面,请重试”的错误. 我就郁闷啦,明明本地设置defin ...
- blfs（systemd版本）学习笔记-安装、配置和使用wpa_supplicant无线网络连接工具
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! wireless项目地址:http://www.linuxfromscratch.org/blfs/view/stable-sy ...
- windows查看笔记本电池使用报告
CMD 下 powercfg /batteryreport /output “C:\battery_report.html” powercfg 参数 /LIST./L 列出所有电源方 ...
- Tomcat异常：server Tomcat v9.09 Server at localhost failed to start
详细报错: 首先不要慌张,这不是Tomcat引发的问题.而是你自己代码错误导致的问题(小编遇到的是配置servlet-mapping时,url-pattern中配置不合法) 然后,检查控制台打印信息, ...
- Python Python实现批量安装android apk包
基于Python实现批量安装android apk包 by:授客 QQ:1033553122 1．相关软件包及文件下载 下载地址:adb软件包及批量安装apk包的py文件.zip 2．测试环境 Win ...