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.写这篇文章的目的, ...
随机推荐
- EXCEL文件导入时报_未在本地计算机上注册Microsoft.ACE.OLEDB.12.0提供程序
解决办法: 解决访问Excel数据源时出现 未在本地计算机上注册Microsoft.ACE.OLEDB.12.0提供程序1.确保安装了Microsoft.ACE.OLEDB.12.0驱动 http:/ ...
- 创作型---原型模式(C# ICloneable接口的实现)
在软件系统中,当创建一个类的实例的过程很昂贵或很复杂,并且我们需要创建多个这样类的实例时,可以通过对原来对象拷贝一份来完成创建,这样在内存中不需要创建多个相同的类实例,从而减少内存的消耗和达到类实例的 ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- python使用gevent实现并发下载器
并发下载原理 import gevent from gevent import monkey import urllib.request monkey.patch_all() def my_downl ...
- virtualbox中 Kali Linux安装增强功能
1. 将VBoxLinuxAdditions.run文件copy出来 2. 赋予执行权限 chmod +x VBoxLinuxAdditions.run 3. 安装 ./VBoxLinuxAdditi ...
- h5网页水印SDK的实现代码示例
在网站浏览中,常常需要网页水印,以便防止用户截图或录屏暴露敏感信息后,追踪用户来源.如我们常用的钉钉软件,聊天背景就会有你的名字.那么如何实现网页水印效果呢? 网页水印SDK,实现思路 1.能更具获取 ...
- canvas-9NonZeroAroundPrinciples.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- es6 语法 （数值扩展）
{ //二进制数值都是0b开头,八进制0o console.log(0b111110111) console.log(0o767); } { console.log('15',Number.isFin ...
- Spotlight on Mysql详细介绍
Spotlight on Mysql详细介绍 by:授客 QQ:1033553122 1. 版本 2. 使用介绍 1) 主页 会话面板 MySQL面板 INNODB面板 存储面板 主机面板 ...
- 小程序实践（五）：for循环绑定item的点击事件
微信展示列表效果借助于 wx:for 简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的 ...