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.写这篇文章的目的, ...
随机推荐
- linux四剑客-grep/find/sed/awk/详解-技术流ken
四剑客简介 相信接触过linux的大家应该都学过或者听过四剑客,即sed,grep,find,awk,有人对其望而生畏,有人对其爱不释手.参数太多,变化形式太多,使用超级灵活,让一部分人难以适从继而望 ...
- 将Python脚本打包成可执行文件
Python是一个脚本语言,被解释器解释执行.它的发布方式: .py文件:对于开源项目或者源码没那么重要的,直接提供源码,需要使用者自行安装Python并且安装依赖的各种库.(Python官方的各种安 ...
- 关于我空间那篇名为《JavaScript axError：Unexpected token ILLEGAL 很简单的代码……》的随笔
如图所示,我是空间的那片随笔,这里就不贴出链接了,也不希望你有这个兴趣,不知道会不会有人无意间闯入,额,自从日志用windows live writer 2009 发了那篇随笔后,我在网页上一直没能正 ...
- C# Winform打包部署时添加注册表信息实现开机自启动
1.原理:需要开机自启动的程序,需要将其启动程序的路径写到注册表中指定的文件夹下 2. 写入注册表的方式有两种 a.在生成安装程序时配置 b.在程序运行时,动态配置 方法一:使用VS2010自带的打包 ...
- 正则表达式之 \b
引用网上一段话: \b 是正则表达式规定的一个特殊代码(好吧,某些人叫它元字符,metacharacter),代表着单词的开头或结尾,也就是单词的分界处.虽然通常英文的单词是由空格,标点符号或者换行来 ...
- 1.shell学习之常用语句
本章学习内容: 1.常见符号 2.命令分隔符-分号";" 3.双分号 ";;" 4. '单引号和"双引号 5.`反引号和$() 6.${}和$ 7.冒 ...
- Java基础IO流(一)
IO概念: 大多数应用程序都需要实现与设备之间的数据传输,例如键盘可以输入数据,显示器可以显示程序的运行结果等.在Java中,将这种通过不同输入输出设备(键盘,内存,显示器,网络等)之间的数据传输抽象 ...
- java使用POI将数据导出放入Excel
本文主要是将数据库取出的数据按照自定义的行列格式导出到excel中,POI则是实现我们需求所用到的技术. POI介绍 使用spring boot导入相关依赖 获取数据(自行处理) 完整代码实例:创建e ...
- C#两个时间相减
原文地址:http://www.jb51.net/article/60177.htm using System; using System.Collections.Generic; using Sys ...
- K8S RBAC
API Server 内部通过用户认证后,然后进入授权流程.对合法用户进行授权并且随后在用户访问时进行鉴权,是权限管理的重要环节. 在 kubernetes 集群中,各种操作权限是赋予角色(Role ...