偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

CSS完美實現(xiàn)垂直居中的方法及優(yōu)缺點

作者：admin
開發(fā) 前端
CSS實現(xiàn)垂直居中還是比較使用的，這里向大家介紹一下CSS實現(xiàn)完美垂直居中的方法以及優(yōu)缺點，主要包括單行內(nèi)容的居中，多行內(nèi)容居中，且容器高度可變等內(nèi)容。

本文和大家重點討論一下CSS實現(xiàn)***垂直居中的方法和優(yōu)缺點，在CSS中要垂直居中，多數(shù)是在有高度的情況下，或者容器高度不定的情況下才用，另外凡是table布局可以實現(xiàn)的，CSS一定可以實現(xiàn)。CSS可以實現(xiàn)的，table未必能做到。

CSS實現(xiàn)***垂直居中

在CSS中要垂直居中，多數(shù)是在有高度的情況下，或者容器高度不定的情況下才用，看上去比較舒服，而且實現(xiàn)的方法也不少，不一定要拘泥于和table布局一樣。不過最近有人問了幾個例子，看來對此的需求還不少。

首先，要有一個概念：凡是table布局可以實現(xiàn)的，CSS一定可以實現(xiàn)。CSS可以實現(xiàn)的，table未必能做到。

現(xiàn)在來幾個例子：

單行內(nèi)容的居中

只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設(shè)置line-height和height，并使兩值相等，再加上over-flow:hidden就可以了。

viewplaincopytoclipboardprint? 

  1. .middle-demo-1{  
  2. height:4em;  
  3. line-height:4em;  
  4. overflow:hidden;  
  5. }  
  6. .middle-demo-1{  
  7. height:4em;  
  8. line-height:4em;  
  9. overflow:hidden;  
  10. }  
  11.  

優(yōu)點：

1.同時支持塊級和內(nèi)聯(lián)極元素

2.支持所有瀏覽器

缺點：

1.只能顯示一行

2.IE中不支持等的居中

要注意的是：1.使用相對高度定義你的height和line-height2.不想毀了你的布局的話，overflow:hidden一定要。

為什么？請比較以下兩個例子：

viewplaincopytoclipboardprint? 

  1. <pstylepstyle="background:#900;color:#00f;font:bold12px/24pxHelvertica,  
  2.  
  3. Arial,sans-serif;height:24px;width:370px;"> 
  4. Loremipsumdolorsitamet,consectetueradipiscingelit.p> 
  5. <br/> 
  6. <br/> 
  7. <pstylepstyle="background:#090;color:#00f;font:bold12px/2emHelvertica,  
  8.  
  9. Arial,sans-serif;height:2em;width:370px;overflow:hidden;"> 
  10. Loremipsumdolorsitamet,consectetueradipiscingelit.p> 
  11. <pstylepstyle="background:#900;color:#00f;font:bold12px/24pxHelvertica,  
  12.  
  13. Arial,sans-serif;height:24px;width:370px;"> 
  14. Loremipsumdolorsitamet,consectetueradipiscingelit.p> 
  15. <br/> 
  16. <br/> 
  17. <pstylepstyle="background:#090;color:#00f;font:bold12px/2emHelvertica,Arial,  
  18.  
  19. sans-serif;height:2em;width:370px;overflow:hidden;"> 
  20. Loremipsumdolorsitamet,consectetueradipiscingelit.p> 
  21.  

上一個高度是用的絕對單位px，并且沒有隱藏溢出，下一個高度用的單位是相對單位em，并且隱藏了溢出。如果你的瀏覽器支持放大字體，那么盡情地放大字體，看看會出現(xiàn)什么效果。#p#

多行內(nèi)容居中，且容器高度可變

也很簡單，給出一致的padding-bottom和padding-top就行

viewplaincopytoclipboardprint? 

  1. .middle-demo-2{  
  2. padding-top:24px;  
  3. padding-bottom:24px;  
  4. }  
  5. .middle-demo-2{  
  6. padding-top:24px;  
  7. padding-bottom:24px;  
  8. }  
  9.  

優(yōu)點：

1.同時支持塊級和內(nèi)聯(lián)極元素

2.支持非文本內(nèi)容

3.支持所有瀏覽器

缺點：容器不能固定高度

把容器當(dāng)作表格單元

CSS提供一系列diplay屬性值，包括display:table,display:table-row,display:table-cell等，能把元素當(dāng)作表格單元來顯示。這是再加上vertical-align:middle,就和表格中的valign="center"一樣了。

viewplaincopytoclipboardprint? 

  1. .middle-demo-3{  
  2. display:table-cell;  
  3. height:300px;  
  4. vertical-align:middle;  
  5. }  
  6. .middle-demo-3{  
  7. display:table-cell;  
  8. height:300px;  
  9. vertical-align:middle;  
  10. }  
  11.  

可惜IE不支持這些屬性，不過在其他瀏覽器上顯示效果非常***。要注意的是：和一個合法的元素必須在

里一樣，display:table-cell元素必須作為display:table的元素的子孫出現(xiàn)。

優(yōu)點：不用說了吧，就是表格，效果和表格一模一樣

缺點：IE下無效#p#

用IE的bug解決IE中的絕對居中

先不得不說一句，IE真的是個很爛的瀏覽器，CSS1中的定義都不支持，害得要我們轉(zhuǎn)個大圈子來造居中。不過就像我說的，凡是table布局可以實現(xiàn)的，CSS一定可以實現(xiàn)，即使在IE里也不例外。我研究IElayout模式多年，還是找出了一個可以在IE中絕對居中的方法。這個方法就是基于IElayout的bug，也可以算以毒攻毒。至于原理，不要問我，這是獨門秘學(xué)，何況三言兩語也講不清楚，只要好用就行。

viewplaincopytoclipboardprint? 

  1. .middle-demo-4{  
  2. height:300px;  
  3. position:relative;  
  4. }  
  5. .middle-demo-4div{  
  6. position:absolute;  
  7. top:50%;  
  8. left:0;  
  9. }  
  10. .middle-demo-4divdiv{  
  11. position:relative;  
  12. top:-50%;  
  13. left:0;  
  14. }  
  15. .middle-demo-4{  
  16. height:300px;  
  17. position:relative;  
  18. }  
  19. .middle-demo-4div{  
  20. position:absolute;  
  21. top:50%;  
  22. left:0;  
  23. }  
  24. .middle-demo-4divdiv{  
  25. position:relative;  
  26. top:-50%;  
  27. left:0;  
  28. }  

整合三和四，寫出支持所有瀏覽器的垂直居中容器！

思路是利用IE和非IE瀏覽器的CSShack,整合三和四的CSS，寫出兼容主流瀏覽器的垂直居中容器。具體代碼就不給出了，大家權(quán)當(dāng)作練習(xí)練習(xí)。例子可以在下面的附錄中找到。

最終實測支持的瀏覽器：IE6+,Mozilla1.7,NetscapeNavigator8,Opera8.0+,Firefox1.0+和Safari1.0+IE5下需要加上對合適模型的補(bǔ)正。

推測支持的瀏覽器：Mozilla1.5+,NetscapeNavigator7+,Opera7+未測試瀏覽器：Konqueror
 

【編輯推薦】

  1. 剖析CSS十大經(jīng)典用法
  2. CSS Sprites樣式生成工具用法詳解
  3. FireFox和IE中CSS兼容技巧匯總
  4. CSS代碼整理及優(yōu)化七大原則
  5. 深入剖析Firefox下 margin-top失效原因與解決方案

 

 

責(zé)任編輯：佚名 來源： nowamagic.net
CSS居中
相關(guān)推薦

2010-08-26 11:27:35

CSS居中

2010-09-13 17:43:59

CSS單行內(nèi)容居中

2010-08-31 15:07:45

CSS居中

2010-09-02 13:03:38

CSS垂直居中

2010-08-27 10:30:16

CSS垂直居中

2010-09-02 09:59:52

CSS SpritesCSS

2010-08-27 09:45:49

CSS Sprites

2012-05-03 09:58:19

VLANVLAN劃分

2010-08-24 14:47:48

CSS居中

2021-07-26 08:31:17

算法

2010-08-16 16:07:30

DIV垂直居中

2018-09-18 11:20:07

css html5javascript

2010-09-09 10:23:23

DIVCSS垂直居中

2022-12-20 15:17:29

CSS開發(fā)

2010-09-01 10:49:57

CSS水平居中垂直居中

2010-08-26 10:21:06

CSS Sprites

2020-05-26 11:39:05

WebReact組件

2010-08-24 09:05:20

CSS+DIV

2010-08-23 10:50:39

DIV+CSS

2013-11-13 14:11:43

點贊
收藏

51CTO技術(shù)棧公眾號

<rt id="tfv8z"><var id="tfv8z"></var></rt>
    • <blockquote id="tfv8z"></blockquote>
    <style id="tfv8z"></style>