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

CSS多行文本垂直居中相关推荐

css如何设置文本垂直居中显示,css中怎么设置文本居中？css文本垂直居中的设置方法...
在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...
CSS之未知高度多行文本垂直居中
一直比较纠结垂直居中的问题,最近又查阅了一些资料,借鉴了一些优秀方案,捣鼓出了一个兼容性较强的多行文本垂直居中解决方案,主要思路依然是利用vertical-align:middle来实现,经过测试,该 ...
CSS：实现多行文本垂直居中的四种方法
对于单行文本,可以使用行高等于高度来设置垂直居中,但多行文本不适用. 实现多行文本垂直居中的四种方法 1. 利用表格元素table+vertical-align实现将父元素设置为块级表格来显示,再将 ...
CSS的水平居中、垂直居中和水平垂直居中
CSS的水平居中.垂直居中和水平垂直居中 1.水平居中水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中这里行内元素是指文本text.图像img.按钮超链接等,只需给父元素 ...
html如何设置字体纵向居中,css 如何使文字垂直居中
单行文本,只需要将文本行高(line-height)和所在区域高度(height)设为一致即可: 这是单行文本垂直居中 /*css代码*/ #div1{ width: 300px; height: 1 ...
html文字垂直居中自动换行,css 如何使文字垂直居中
单行文本,只需要将文本行高(line-height)和所在区域高度(height)设为一致即可: 这是单行文本垂直居中 /*css代码*/ #div1{ width: 300px; height: 1 ...
HTML 中多行文本垂直居中
最近在做官网,其中有个小小的需求是一段多行文本在一个区域内垂直居中,就如下图所示: 需要将右面的文字垂直居中,通过网上查找资料显示可以使用display:table 的方法来实现. 请看这篇博文; h ...
html中div文字垂直居中显示,CSS文本和div垂直居中方法总结
在样式布局中,我们经常碰到需要将元素居中.通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;,而对div等块级元素,只需要设置其left和rig ...
CSS中实现水平/垂直居中
CSS中实现水平/垂直居中在CSS中实现水平居中相对简单,但是却没有一个明确的属性表示这是实现垂直居中的,这就导致垂直居中的实现相对初学者来说难上许多.但是在实际的开发中垂直居中的需求常常出现,例如 ...

CSS多行文本垂直居中

CSS多行文本垂直居中相关推荐

最新文章

热门文章