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.写这篇文章的目的, ...
随机推荐
- maven web工程缺少 src/main/java 和 src/test/java 资源文件夹的方法
右键打开:build path -> configure build path... 在弹出的界面,选择: 编辑后: 点击finish,即可完成
- asp.net-常用服务器控件-20180329
常用服务器控件 1.文本类型控件 Label控件 TextBox控件 2.按钮类型控件 Button控件 ImageButton控件 3.选择类型控件 CheckBox控件 RadioButton控件 ...
- (6)Microsoft office Word 2013版本操作入门_文件封面，页首，页尾
1插入封面: 1.1光标移动到首段,按住 Ctrl+Enter键可以插入一个新页面. 1.2 插入--->封面 可以在封面插入一个文件封面,里面的图片可以自己修改,文字标题也可以自己修改. 1. ...
- 史上最全python面试题详解（一）（附带详细答案（关注、持续更新））
python基础题(53道题详解) 1.简述解释型和编译型编程语言? 概念: 编译型语言:把做好的源程序全部编译成二进制代码的可运行程序.然后,可直接运行这个程序. 解释型语言:把做好的源程序翻译一句 ...
- linux下ftp服务器搭建
1.yum install vsftpd 使用yum安装ftp 2.创建并授权ftp文件目录 mkdir -P /ftp/ftpadmin chmod -R 777 /ftp/ftp ...
- CodeMirror 使用
codemirror是一款在线代码编辑器,官网:https://codemirror.net/doc/manual.html#overview 使用说明 第一步 安装: npm install cod ...
- Javascript动态引用CSS文件的2种方法介绍
最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说! javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现 ...
- angular ng-click防止重复提交
方法一:点击后,让button的状态变为disable js指令: .directive('clickAndDisable', function() { return { scope: { click ...
- [总结]WEB前端常用命令
webpack等工具操作 自动创建package.json文件:npm init 如何根据package.json来自动安装包:npm install npm具体安装某个组件:npm install ...
- Web前端开发必备
前端学习相关书籍 关于书籍 HTML.CSS 类别书籍,都是大同小异,在当当网.卓越网搜索一下很多推荐.如果感觉学的差不多了,可以关注一下<CSS禅意花园>,这个很有影响力. Javasc ...