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

2021-06-25 21:01:53 字數 1087 閱讀 8909

近日,微博上有朋友比較糾結未知高度的文字垂直居中問題。這個和「未知高度垂直居中」有些類似,但是有一些細節需要注意。

這裡有之前寫的乙個未知寬高對話方塊的垂直居中(拖動改變大小看是不是依然居中?),只不過對話方塊是相對於 viewport(視口)居中的,這裡的文字需要的是相對於容器垂直居中。

拿到這樣的需求時,先不要想著如何相容 ie6/7。先想想文字垂直居中靠什麼屬性?vertical-align: middle 對吧,好的,自然也就聯絡到了可愛的 inline-block。精心開發5年的ui前端框架!

主要的**如下:

.** 

多行文字未知高度垂直居中-by 一絲多行文字未知高度垂直居中-by 一絲多行文字未知高度垂直居中-by 一絲  

.box:before  

.text  

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 來解決,在面對這樣的需求時候,思路很重要。

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

莜霓網路工作室 近日,微博上有朋友比較糾結未知高度的文字垂直居中問題。這個和 未知高度垂直居中 有些類似,但是有一些細節需要注意。這裡有之前寫的乙個未知寬高對話方塊的垂直居中 拖動改變大小看是不是依然居中?只不過對話方塊是相對於 viewport 視口 居中的,這裡的文字需要的是相對於容器垂直居中。...

多行文字垂直居中

單行文字垂直居中比較簡單,只需將 line height 屬性值與其父元素的 height 屬性值設為相等即可。如下所示 class text 這是第一段文字span class text 這是第二段文字span class text 這是第三段文字span class text 這是第四段文字sp...

CSS多行文字垂直居中

今天需要將文字垂直居中,就是一行是垂直居中,多行也是垂直居中。效果如下 實現 同事提供 doctype html html head lang en meta charset utf 8 title title style listdiv listdivleft listdivleft span l...