设计观点View
作者头像

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

【一丝冰凉】 /2013-05-03/已有人看过/层叠之美

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

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

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

主要的代码如下:pzY上海云路网络科技有限公司

<body>pzY上海云路网络科技有限公司
<div class=”box”>pzY上海云路网络科技有限公司
<p class=”text”>pzY上海云路网络科技有限公司
多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝pzY上海云路网络科技有限公司
</p>pzY上海云路网络科技有限公司
</div>pzY上海云路网络科技有限公司

 pzY上海云路网络科技有限公司

.box:before{pzY上海云路网络科技有限公司
content: ‘我是那个备胎元素’;pzY上海云路网络科技有限公司
display: inline-block;pzY上海云路网络科技有限公司
vertical-align: middle;pzY上海云路网络科技有限公司
width: 0;pzY上海云路网络科技有限公司
height: 100%;pzY上海云路网络科技有限公司
}pzY上海云路网络科技有限公司
.text{pzY上海云路网络科技有限公司
display: inline-block;pzY上海云路网络科技有限公司
font-size:16px;pzY上海云路网络科技有限公司
vertical-align: middle;/* 保证文字垂直居中 */pzY上海云路网络科技有限公司
}pzY上海云路网络科技有限公司

vertical-align的对齐是需要有参照物的,那么box 容器通过 before 生成一个高度 100% 的「备胎」,他的高度和容器的高度是一致的,相对于「备胎」垂直居中,在视觉上表现出来也就是相对于容器垂直居中了。让我们一起来试试。pzY上海云路网络科技有限公司

1.可以发现按照我们的思路,文字换行了,这是肿么了?Demo:pzY上海云路网络科技有限公司

pzY上海云路网络科技有限公司

2.别急,既然「备胎」占用了本来文字的位置,那用 margin 负值试试,DemopzY上海云路网络科技有限公司

好像还是不行捏?凌乱鸟~pzY上海云路网络科技有限公司

还记得《inline-block 前世今生》中我们说到的 inline-block 元素间会产生空隙,难道是这货在捣乱?pzY上海云路网络科技有限公司

3.还记得之前怎么处理空隙的吗?font-size:0 !试试看pzY上海云路网络科技有限公司

pzY上海云路网络科技有限公司

4.柳暗花明又一村,世界和谐了,那么最后只要隐藏掉 before 生成的内容即可,请看最终 DemopzY上海云路网络科技有限公司

最后,记得把「content 」中的备胎去掉哦!兼容IE8+,Webkit,Firefox,Opera。(不要问我IE6怎么搞了,思路最重要)pzY上海云路网络科技有限公司

看看高度改变时的动画演示:pzY上海云路网络科技有限公司

pzY上海云路网络科技有限公司

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

以上pzY上海云路网络科技有限公司
一丝pzY上海云路网络科技有限公司

转载请注明出处:http://www.iyunlu.com/view/css-xhtml/77.htmlpzY上海云路网络科技有限公司