a-a+
前端部落格
•2015-09-10
•前端開發
•css hack | 相容性
• 16940view
2 之前寫過一篇關於：css左右居中對齊的文章，裡面提到的兩種方法其實也可以引申為垂直居中對齊。寫這篇文章是因為要相容ie6、ie7的問題，我們都知道一行文字時可以通過line-height來設定垂直居中，如果是多行這個肯定不行，而我的同事因為這個用了js來實現居中對齊，我覺得這是很難理解的。故而整理這篇文章。
html
**：
class="middle-box"第一種：display:table的方法>
class="middle-inner"
>
>
class="suc-tip"
>前端開發部落格，專注前端開發和web教程
>
/>
class="suc-link"
>快捷入口：href=""
>
>
>
>
style="display:none;"
>
class="suc-tip"
>5年的老部落格，一直致力於web開發
>
>
>
>
.middle-box缺點就是不相容ie6、ie7.怎麼相容呢？.middle-inner
當然是用另外一種相對定位和絕對定位的方式。
可以使用ie的特有的條件語法，不過我習慣用ie hack來寫。下面這個的**實現了水平垂直多行**（支援一行）居中對齊。目前測試ie、chrome和firefox均相容。**如下：.middle-box以後遇到居中問題，這三句css.middle-inner
.middle-inner
p
就夠用了。更多的css3
flexbox、margin負值等相容性
還需要**。演示
更新於9.24
第二種方法：增加乙個空白標籤
html**：
前端開發部落格，專注前端開發和web教程
快捷入口：
5年的老部落格，一直致力於web開發
.middle-box
.middle-box p
.visible
CSS多行文字垂直居中
今天需要將文字垂直居中，就是一行是垂直居中，多行也是垂直居中。效果如下 實現 同事提供 doctype html html head lang en meta charset utf 8 title title style listdiv listdivleft listdivleft span l...
CSS多行文字垂直居中
今天需要將文字垂直居中，就是一行是垂直居中，多行也是垂直居中。效果如下 實現 同事提供 doctype html html head lang en meta charset utf 8 title title style listdiv listdivleft listdivleft span l...
css布局 多行文字垂直居中
場景 父元素 高度固定，如何使其中的文字垂直居中？方法一 測試文字測試文字 測試文字 測試文字 測試文字 測試文字 測試文字 測試文字 結果截圖 關鍵樣式 父元素 這裡是div 設定和高度一致的 line height 這裡是200px 由後面的vertical align定義看，這是為了設定div...