近日,微博上有朋友比较纠结未知高度的文本垂直居中问题。这个和「未知高度图片垂直居中」有些类似,但是有一些细节需要注意。
这里有之前写的一个未知宽高对话框的垂直居中(拖动改变大小看是不是依然居中?),只不过对话框是相对于 viewport(视口)居中的,这里的文字需要的是相对于容器垂直居中。
拿到这样的需求时,先不要想着如何兼容 IE6/7。先想想文字垂直居中靠什么属性?vertical-align: middle 对吧,好的,自然也就联系到了可爱的 inline-block。精心开发5年的UI前端框架!
主要的代码如下:
<body> <div class=”box”> <p class=”text”> 多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝 </p> </div> .box:before{ content: ‘我是那个备胎元素’; display: inline-block; vertical-align: middle; width: 0; height: 100%; } .text{ display: inline-block; font-size:16px; vertical-align: middle;/* 保证文字垂直居中 */ }
vertical-align的对齐是需要有参照物的,那么box 容器通过 before 生成一个高度 100% 的「备胎」,他的高度和容器的高度是一致的,相对于「备胎」垂直居中,在视觉上表现出来也就是相对于容器垂直居中了。让我们一起来试试。精心开发5年的UI前端框架!
1.可以发现按照我们的思路,文字换行了,这是肿么了?Demo:
2.别急,既然「备胎」占用了本来文字的位置,那用 margin 负值试试,Demo。
好像还是不行捏?凌乱鸟~精心开发5年的UI前端框架!
还记得《inline-block 前世今生》中我们说到的 inline-block 元素间会产生空隙,难道是这货在捣乱?
3.还记得之前怎么处理空隙的吗?font-size:0 !试试看
4.柳暗花明又一村,世界和谐了,那么最后只要隐藏掉 before 生成的内容即可,请看最终 Demo。
最后,记得把「content 」中的备胎去掉哦!兼容IE8+,Webkit,Firefox,Opera。(不要问我IE6怎么搞了,思路最重要)
看看高度改变时的动画演示:
诚然,以上是一种非常 Hack 的解决方案。本质上还是应该由 Flex 来解决,在面对这样的需求时候,思路很重要。
相关推荐
css 多行文本垂直居中显示,兼容各大浏览器!
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
多行文本垂直居中的CSS需要这么设置: 复制代码代码如下: /*多行居中对齐的方法,width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性,且div不能浮动*/ .vcenter { width: 100px; ...
div中多行文字垂直居中
delphi android 多行文本居中apk
继承mfc的static类,实现可设置字体、字体大小、粗体、斜体,文字在水平方向和垂直方向上居中显示;而且还能根据控件大小自动缩小文字大小以防止文字出界显示不全。但目前还存在bug:若设置为粗体显示,文字显示还是...
div+css多行文字实现垂直居中,高度可自动适应
易语言源码易语言文本垂直居中源码.rar 易语言源码易语言文本垂直居中源码.rar 易语言源码易语言文本垂直居中源码.rar 易语言源码易语言文本垂直居中源码.rar 易语言源码易语言文本垂直居中源码.rar 易语言源码...
接下来将介绍下:div垂直居中的N种方法包括:单行垂直居中/多行未知高度文字的垂直居中/多行文本固定高度的居中/在InternetExplorer中的解决方案等等感兴趣的你可不要错过了哈,或许本文所提供的方法对你有所帮助
div垂直居中的N种方法 单行/多行文字(未知高度/固定高度) 说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在...
VCenterEdit一个比较完美的文本垂直居中的CEdit类。该类来源于网络上的CVEdit类,加入了处理ReadOnly栏目的代码,构成一个比较实用的VCenterEdit一个比较完美的文本垂直居中的CEdit类。供大家参考交流。经测试,可以...
易语言文本垂直居中源码,文本垂直居中,偏移矩形_,SendMessage
VB文本垂直居中,主要是为了补TEXTBOX不能垂直居中的不足
继承系统的TextBox,支持文字垂直居中;自动折行(即WordWrap = True)也支持垂直居中。
主要介绍了CSS文本和div垂直居中方法总结,包括多行文本垂直居中,单行文本垂直居中,子div垂直居中,感兴趣的小伙伴们可以参考一下
不需要知道待垂直居中的容器高度(意味着不需要写死任何高度数值)支持多行垂直居中可做为工具样式来使用, 例如这里的: .vcenter, .vcenter-childCSS.vcenter { position: relative; height: 100%;}.vcenter-child { ...
教你如何把Winform TextBox 垂直居中的类文件 京华志&精华志出品 希望大家互相学习,互相进步 支持CSDN 支持微软
div框水平垂直居中跟内容垂直居中
VC组合框文本完全地垂直居中显示,字体背景色设置,列表项重绘(颜色字体背景色设置),边框色设置,可删除,可只读