日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSS完美實現(xiàn)垂直居中的方法及優(yōu)缺點

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

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比互助網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式互助網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋互助地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

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

優(yōu)點：

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

2.支持所有瀏覽器

缺點：

1.只能顯示一行

2.IE中不支持等的居中

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

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

viewplaincopytoclipboardprint?

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3. Arial,sans-serif;height:24px;width:370px;">
    4. 
  
  
  
  
  4. Loremipsumdolorsitamet,consectetueradipiscingelit. p>
    5. 
  
  
  
  

    6. 
  
  
  
  

    7. 
  
  
  
  
  7. 
  
  
  
  
  8. 
  
  
  
  
  9. Arial,sans-serif;height:2em;width:370px;overflow:hidden;">
    10. 
  
  
  
  
  10. Loremipsumdolorsitamet,consectetueradipiscingelit. p>
    11. 
  
  
  
  
  11. 
  
  
  
  
  12. 
  
  
  
  
  13. Arial,sans-serif;height:24px;width:370px;">
    14. 
  
  
  
  
  14. Loremipsumdolorsitamet,consectetueradipiscingelit. p>
    15. 
  
  
  
  

    16. 
  
  
  
  

    17. 
  
  
  
  
  17. 
  
  
  
  
  18. 
  
  
  
  
  19. sans-serif;height:2em;width:370px;overflow:hidden;">
    20. 
  
  
  
  
  20. Loremipsumdolorsitamet,consectetueradipiscingelit. p>
    21. 
  
  
  
  
  21.

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

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

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

viewplaincopytoclipboardprint?

 
 
 
 
    
  
  
  
  
  1. .middle-demo-2{ 
    2. 
  
  
  
  
  2. padding-top:24px; 
    3. 
  
  
  
  
  3. padding-bottom:24px; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. .middle-demo-2{ 
    6. 
  
  
  
  
  6. padding-top:24px; 
    7. 
  
  
  
  
  7. padding-bottom:24px; 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  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. 
  
  
  
  
  2. display:table-cell; 
    3. 
  
  
  
  
  3. height:300px; 
    4. 
  
  
  
  
  4. vertical-align:middle; 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. .middle-demo-3{ 
    7. 
  
  
  
  
  7. display:table-cell; 
    8. 
  
  
  
  
  8. height:300px; 
    9. 
  
  
  
  
  9. vertical-align:middle; 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11.

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

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

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

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

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

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

責(zé)任編輯：佚名
來源： nowamagic.net CSS 居中
分享到微信

微信掃碼分享

分享到微博 相關(guān)推薦
實現(xiàn)
CSS
垂直
居中
的五大
方法
及
優(yōu)缺點 利用CSS來實現(xiàn)對象的垂直居中有許多不同的方法，本文向大家介紹一下使對象垂直集中的5種不同方法，以及它們各自的優(yōu)缺點。

2010-08-26 11:27:35

CSS 居中
CSS單行內(nèi)容
居中
實現(xiàn)
及
優(yōu)缺點 要實現(xiàn)CSS單行內(nèi)容居中，多數(shù)是在有高度的情況下，或者容器高度不定的情況下才用，看上去比較舒服，而且實現(xiàn)的方法也不少，不一定要拘泥于和table布局一樣。

2010-09-13 17:43:59

CSS單行內(nèi)容居中
完美
實現(xiàn)
CSS頁面
居中
方法揭秘 你對CSS頁面居中的方法是否了解，這里和大家分享一下，我們常用的margin:0auto;方法，這個方法是大家用的最多的方法，使用的時候必須為容器指定寬度，另外向大家介紹幾種特殊的方法。

2010-08-31 15:07:45

CSS 居中 5種
方法解決
CSS
實現(xiàn)
垂直
居中問題 利用CSS來實現(xiàn)對象的垂直居中有許多不同的方法，本文向大家介紹一下使對象垂直集中的5種不同方法，以及它們各自的優(yōu)缺點。

2010-08-27 10:30:16

CSS 垂直居中
CSS中
實現(xiàn)DIV容器
垂直
居中
方法揭秘 CSS布局中水平居中比垂直居中簡單些，因為我們設(shè)計頁面的時候往往水平寬度都是固定的，所以我們有必要總結(jié)一下在頁面布局過程中實現(xiàn)垂直居中的方法。

2010-09-02 13:03:38

CSS 垂直居中
CSS Sprites對
CSS布局
的意義
及
優(yōu)缺點 你對CSSSprites圖片切割術(shù)的概念和用法是否了解，這里向大家描述一下CSSSprites對CSS布局的意義、優(yōu)點和缺點，希望本文介紹對你有所幫助。

2010-09-02 09:59:52

CSS Sprites CSS
CSS Sprites工作原理
及
優(yōu)缺點 本文向大家描述一下CSSSprites工作原理及優(yōu)缺點，CSSSprites技術(shù)早在2005年CSSZengarden的園主DaveShea就在ALA發(fā)表對該技術(shù)的詳細(xì)闡述。

2010-08-27 09:45:49

CSS Sprites VLAN劃分
方法
及
優(yōu)缺點 基于端口的VLAN的劃分是最簡單、有效的VLAN劃分方法，它按照局域網(wǎng)交換機(jī)端口來定義VLAN成員。

2012-05-03 09:58:19

VLAN VLAN劃分
CSS
實現(xiàn)元素水平
垂直
居中
的 N 種方式 可用verticalalign屬性,而verticalalign只有在父層為td或者th時,才會生效，對于其他塊級元素,例如div、p等，默認(rèn)情況是不支持的。

2021-07-26 08:31:17

算法
CSS
實現(xiàn)文本
垂直
居中
的三種情況 本文向大家介紹一下如何使用CSS實現(xiàn)一行或多行文本垂直居中，在單元格中，默認(rèn)就是垂直居中的，而進(jìn)行CSS網(wǎng)頁布局，這樣的形式改變了，文字默認(rèn)是居于容器頂部。

2010-08-24 14:47:48

CSS 居中
CSS
實現(xiàn)水平
垂直
居中
的1010種方式（史上最全） 本文總結(jié)了一下CSS實現(xiàn)水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個github倉庫，歡迎大家star。

2018-09-18 11:20:07

css html5 javascript 兩大
方法
實現(xiàn)DIV
垂直
居中 本文向大家介紹一下DIV垂直居中的幾種方法，主要包括單行DIV垂直居中和多行未知高度文字的DIV垂直居中兩大部分內(nèi)容，希望本文介紹對你有所幫助。

2010-08-16 16:07:30

DIV垂直居中 頁面中使用
CSS
垂直
居中
的技巧 這里向大家描述一下DIV和CSS實現(xiàn)頁面垂直居中的方法，包括單行CSS垂直居中，多行未知高度文字的CSS垂直居中以及多行文本固定高度的居中等內(nèi)容。

2010-09-09 10:23:23

DIV CSS垂直居中
CSS水平
居中和
垂直
居中多種解決方案 你對CSS中居中的概念和方法是否熟悉，這里向大家描述一下CSS中水平居中和垂直居中的多種解決方案，主要包括單行垂直居中，層水平居中，div層垂直居中等內(nèi)容。

2010-09-01 10:49:57

CSS 水平居中 垂直居中 八種
CSS
實現(xiàn)內(nèi)容
居中
的
方法 關(guān)于CSS實現(xiàn)內(nèi)容居中的方式有很多種，在今天這篇文章里，我給大家整理了8種實現(xiàn)內(nèi)容居中的方式，希望這些方法對你學(xué)習(xí)和使用CSS進(jìn)行開發(fā)有幫助。

2022-12-20 15:17:29

CSS 開發(fā)
CSS Sprites簡介以及
優(yōu)缺點 CSSSprites并不是什么金科玉律，但在很多情況下，它有著一定的優(yōu)勢，最重要的是它可以減輕服務(wù)器的負(fù)載，提高網(wǎng)頁加載速度。

2010-08-26 10:21:06

CSS Sprites 在React中
實現(xiàn)條件渲染
的5種
方法
及
優(yōu)缺點 隨著現(xiàn)代Web應(yīng)用的重量從后端轉(zhuǎn)移到前端，我們不得不花更多的時間去考慮性能優(yōu)化。在實現(xiàn)條件渲染時也是如此。

2020-05-26 11:39:05

Web React 組件 探究
CSS+DIV布局
的
優(yōu)缺點 本文向大家描述一下CSS+DIV框架的優(yōu)缺點，CSS框架為你的項目提供一個干凈、嚴(yán)謹(jǐn)?shù)幕A(chǔ)架構(gòu)，通過CSS+DIV框架你可以快速的為你的站點搭建基礎(chǔ)的html代碼框架。

2010-08-24 09:05:20

CSS+DIV DIV+
CSS布局技術(shù)
的
優(yōu)缺點 本文向大家介紹一下采用DIV+CSS布局技術(shù)的好處與壞處，采用DIV+CSS好處和壞處各有三個，相信本文介紹一定會讓你有所收獲。

2010-08-23 10:50:39

DIV+CSS 解決DIV列高度自適
方法
及
優(yōu)缺點 解決DIV列高度自適的方法有很多種，這里介紹三種最常用的方法以及優(yōu)缺點給大家，相信本文介紹一定會讓你有所收獲。

2010-08-26 15:08:08

DIV 高度

相似話題

后端
25876內(nèi)容
開發(fā)工具
7174內(nèi)容
測試
482內(nèi)容
游戲開發(fā)
648內(nèi)容
全部話題

同話題下的熱門內(nèi)容

六個好用的Python庫，絕對是瑰寶! 2024，開發(fā)通用軟件正在發(fā)生的八大變化！ 2024 年 2 月 TIOBE 指數(shù)：最流行的十種編程語言 1.5億行代碼變更背后：代碼質(zhì)量下降，誰來背鍋？ 為React開發(fā)人員釋放ChatGPT的開發(fā)力量 面試官：如何實現(xiàn)10億數(shù)據(jù)判重？ 孰優(yōu)孰劣，詳細(xì)比較Python、Julia、Rust 字節(jié)跳動最熱門的 15 個前端開源項目

相關(guān)專題 更多

2023年第十八屆中國企業(yè)年終評選榜單公布！ 網(wǎng)絡(luò)運維智能化？瞻博網(wǎng)絡(luò)有奇招！ 2023-12-18 11:43:34 Intel 黑客松競賽火熱進(jìn)行中！ 2023-11-06 12:00:56 我收藏的內(nèi)容

微博

QQ

微信

復(fù)制鏈接

微信掃碼分享

業(yè)務(wù)

  • 媒體 CIOAgeHC3iTechplur
  • 社區(qū) 博客軟考資訊鴻蒙開發(fā)者社區(qū)
  • 教育 學(xué)堂精培企業(yè)培訓(xùn)CTO訓(xùn)練營
  • 學(xué)堂
  • 學(xué)堂企業(yè)版

  • 官微



關(guān)于我們&條款

  • 關(guān)于我們
  • 站點地圖
  • 網(wǎng)站大事
  • 意見反饋
  • English
  • 用戶協(xié)議
  • 隱私協(xié)議

北京市海淀區(qū)中關(guān)村南1條甲1號ECO中科愛克大廈6-7層

北京市公安局海淀分局備案編號：110108002980號
營業(yè)執(zhí)照 京ICP備09067568號

Copyright ? 2005-2024 .COM 京ICP證060544 版權(quán)所有 未經(jīng)許可 請勿轉(zhuǎn)載

友情鏈接

新浪科技 騰訊科技 網(wǎng)易科技 鳳凰科技 驅(qū)動科技 科技行者 TechWeb 艾瑞網(wǎng) 站長之家 速途網(wǎng) 中國經(jīng)濟(jì)新聞網(wǎng) IT之家 工聯(lián)網(wǎng) 極客公園 236視頻會議 中國IDC圈 企業(yè)網(wǎng)D1Net 投資界 次方元 火山引擎

技術(shù)棧公眾號

技術(shù)棧公眾號

業(yè)務(wù)
速覽

在線客服

媒體 CIOAge HC3i 社區(qū) 博客 鴻蒙開發(fā)者社區(qū) 教育 學(xué)堂 精培 企業(yè)培訓(xùn) CTO訓(xùn)練營

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

當(dāng)前標(biāo)題：CSS完美實現(xiàn)垂直居中的方法及優(yōu)缺點
文章鏈接：http://m.5511xx.com/article/dhcgsch.html