未知高度多行文本垂直居中

泡在网上的日子 / 文 发表于2013-05-04 02:56 次阅读 css

近日,微博上有朋友比较纠结未知高度的文本垂直居中问题。这个和「未知高度图片垂直居中」有些类似,但是有一些细节需要注意。

这里有之前写的一个未知宽高对话框的垂直居中(拖动改变大小看是不是依然居中?),只不过对话框是相对于 viewport(视口)居中的,这里的文字需要的是相对于容器垂直居中。

拿到这样的需求时,先不要想着如何兼容 IE6/7。先想想文字垂直居中靠什么属性?vertical-align: middle 对吧,好的,自然也就联系到了可爱的 inline-block。

主要的代码如下:

<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% 的「备胎」,他的高度和容器的高度是一致的,相对于「备胎」垂直居中,在视觉上表现出来也就是相对于容器垂直居中了。让我们一起来试试。

1.可以发现按照我们的思路,文字换行了,这是肿么了?Demo:

2.别急,既然「备胎」占用了本来文字的位置,那用 margin 负值试试,Demo

好像还是不行捏?凌乱鸟~

还记得《inline-block 前世今生》中我们说到的 inline-block 元素间会产生空隙,难道是这货在捣乱?

3.还记得之前怎么处理空隙的吗?font-size:0 !试试看

4.柳暗花明又一村,世界和谐了,那么最后只要隐藏掉 before 生成的内容即可,请看最终 Demo

最后,记得把「content 」中的备胎去掉哦!兼容IE8+,Webkit,Firefox,Opera。(不要问我IE6怎么搞了,思路最重要)

看看高度改变时的动画演示:

诚然,以上是一种非常  Hack 的解决方案。本质上还是应该由 Flex 来解决,在面对这样的需求时候,思路很重要。关于CSS 3 对齐规范在这里《CSS Box Alignment Module Level 3》


收藏 赞 (0) 踩 (0)
上一篇: Github 上最受欢迎的一些 CSS 框架参考
css框架其实很早就出现了,他产生的原因是css代码跟其他代码一样,很多时候是高度重复性的,经验丰富的工程师们都会总结出自己的可复用代码,以便应用到不同的项目之中,其中优秀且知名度高的就成了我们所熟悉的css框架,其实就是一套具有普适性的css代码。
下一篇:inline-block的前世与今生
曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码是为了兼容 IE6、7而已。那么你真的了解 inline-block 了吗?本文将