您現在的位置是:電腦技術吧?>? 故障問題 ??>??div內容上下居中,div內容居中??>??正文詳情

div內容上下居中,div內容居中

馬香巧2019-11-18 03:40:33 人圍觀
簡介設置div內容居中盡管divs中的內容居中問題一直是一個比較老的話題,但最近發現許多前端開發人員都在問如何實現它。事實上,互聯網上有很多數據和案例。這里我將總結一些常見的處

雖然div中內容上下居中的問題已經是一個比較古老的話題,但是最近發現還是有很多前端開發者在詢問如何實現。

其實網絡上已經有很多資料和案例了,我這里再總結一下幾個比較常見的處理方式。

情形一:div限高,內容長度限一行代碼如下:style.v-align {margin: 0 auto;width: 200px;height: 80px;text-align: center;line-height: 80px;border: 1px solid #ddd;}/style!-- html --div class=v-align我的內容只能有一行。

/div

情形二:div限高,內容不限代碼如下:.v-mult {margin: 0 auto;width: 200px;height: 100px;border: 1px solid #ddd;overflow: hidden;}.v-mult .empty,.v-mult .text {display: inline-block;*display: inline;*zoom: 1;vertical-align: middle;}.v-mult .empty {height: 100%;}!-- html --div class=v-multspan class=empty/spanspan class=text我的內容不限,多高都行換行照常/span/div

情形三:div高度不定,內容高度一定代碼如下:.v-auto {position: relative;margin: 0 auto;width: 200px;border: 1px solid #ddd;}.v-auto .text {position: absolute;top: 50%;margin-top: -50px;height: 100px;border: 1px dashed #ddd;}!-- html --div class=v-autodiv class=text我的高度是固定的,只有100px高,但是我的父及高度不定,我怎么垂直居中呢?

/div/div

情形四:div高度不定,內容高度不定代碼如下:.v-auto-out {position: relative;margin: 0 auto;width: 200px;border: 1px solid #ddd;}.v-auto-out .auto-in {position: absolute;top: 50%;border: 1px dashed #ddd;/* 這里有兼容性問題 */-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);}!-- html --div class=v-auto-outdiv class=auto-in我的高度不定,我的父及高度也不定,這下要上下居中,該如何是好?

我們一起來瞧瞧吧。

/div/div

好了,知道這四種方式,我相信足以應對日常工作中的各種垂直居中問題。

代碼很簡單,不再做多余闡述。

總之一句話,CSS的各個屬性樣式,就好像人肢體的各個器官,了解了各個器官的功能,才能相互配合完成各種任務。

相反,個體的能力是有限的。

版權聲明:本文由 馬香巧 整理編輯。

原標題:div里面的內容居中,讓div中的內容居中

轉載注明出處:http://www.dn9ww09s.icu/fault/13377.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • win10如何獲得管理員權限,win10如何開管理員權限

    win10如何獲得管理員權限,win10如何開管理員權限 相關圖片w10提供管理員權限當我們安裝軟件時,我們經常提示管理員許可。你知道如何設置win10的管理員權限嗎?win10的管理員權限有什么用?現在,超人軟件編輯將為您解答。我希望你有win10家...

  • 玫瑰小鎮魅力圖標有什么用,qq魔法卡片手機版

    玫瑰小鎮魅力圖標有什么用,qq魔法卡片手機版 相關圖片qq輸入法怎么導入對于很多QQ用戶來說,點亮所有的圖標是一件非常有趣的事情。玫瑰城是一個圖標,許多人沒有點燃。那么,玫瑰城的標志性建筑如何才能被點亮呢?如果玫瑰城進不來...

  • 網頁設計,外國優秀網頁設計

    網頁設計,外國優秀網頁設計 相關圖片優秀網頁設計官網“火星救援”仍處于起步階段。《星球大戰7》即將上映。事實上,即使沒有這些電影,人們對宇宙的熱情也從未降低。自古以來,人類喜歡抬頭仰望天空,這也解釋了...

  • 懷舊服多玩魔盒怎么徹底刪除,wow大腳插件設置教程

    懷舊服多玩魔盒怎么徹底刪除,wow大腳插件設置教程 相關圖片魔獸世界多玩魔盒教程現在市場上有很多游戲盒,一個玩家使用多個游戲盒后發現不適合自己。那么如何徹底刪除多場魔盒呢?現在,超人軟件編輯就來介紹一下如何徹底刪除多場魔盒...

  • 開發者證書,開發者證書怎么獲取

    開發者證書,開發者證書怎么獲取 相關圖片免費ios開發者證書付款成功后,您將收到一封來自Apple Developer suport的確認電子郵件,如下圖所示。電子郵件中有一個登錄按鈕,單擊后可以進入Apple Deve蘋果開發者證書類型...

  • word繪制斜線表頭,繪制斜線表頭

    word繪制斜線表頭,繪制斜線表頭 相關圖片word繪制表格如何繪制斜線標題是許多word用戶頭疼的問題。今天,超人軟件將介紹如何在word2003和word2007中繪制word中的斜線標題。感興趣的合作伙伴不應該word斜線表頭怎么打字...

  • eclipse字體大小設置 主題設置,eclipse字體大小設置 快捷鍵

    eclipse字體大小設置 主題設置,eclipse字體大小設置 快捷鍵 相關圖片pr字體大小怎么改不了Eclipse是一個開源的、基于Java的可擴展開發平臺,具有一組標準的插件,包括Java開發工具。許多用戶在使用eclipse的過程中需要設置字體大小,但是他微博的蘋果版...

  • j,,j怎么

    j,,j怎么 相關圖片k?j病毒名稱(中文):病毒別名:威脅等級:★★☆病毒類型:網頁病毒長度:影響系統:win9xwinnt病毒行為:網頁木馬假冒國外某知名網銀網頁,竊取用戶atmcar新j...

  • 2003word字數統計在哪,doc文檔字數統計在哪里

    2003word字數統計在哪,doc文檔字數統計在哪里 相關圖片word技術在哪里當我們用word寫文章時,單詞計數的功能特別實用。當我們遇到需要字數的字操作時,這個小小的字功能可以省去我們很多的心血。但很多人不知道count這個詞在哪里,電腦...

  • displayflex,display flex什么意思

    displayflex,display flex什么意思 相關圖片display在過去的兩天里,我一直在做手機項目,并使用CSS3的新特性。還不是所有瀏覽器都支持它,所以請使用前綴。請參見以下:HTML代碼:div clas s=s-indcssdisplayflex...

熱評文章

  • ps字體安裝詳細教程,ps不顯示新安裝的字體

    ps字體安裝詳細教程,ps不顯示新安裝的字體 相關圖片ps教程文字效果我相信當你使用PS時,你都希望有更多的字體格式。那么如何安裝PS字體呢?接下來,超人軟件編輯想給大家帶來PS字體安裝教程,希望大家喜歡它怎么安裝PS字體?方法...

  • s。,s?s

    s。,s?s 相關圖片什么是HTML病毒名稱(中文):病毒別名:威脅級別:★★☆病毒類型:網頁病毒長度:影響系統:win9xwinnt病毒行為:網頁病毒利用ie漏洞將sysp.exe文件下載到C:HTML5...

  • word是否使用安全模式,怎樣用安全模式打開word

    word是否使用安全模式,怎樣用安全模式打開word 相關圖片word提示用安全模式打開最近,很多朋友反映,當他們打開word時,發現它總是以安全模式打開的。那么單詞安全模式有什么用呢?如何刪除word安全模式?現在,超人軟件將為你解答,希...

  • 用dreamweaver做網頁,dreamweaver個人網頁

    用dreamweaver做網頁,dreamweaver個人網頁 相關圖片dreamweaver使用結果表明,用表格美化網頁的方法有很多種。在這個例子中創建的層次表如圖8-1所示,它不需要很多技巧就可以使用表單來美化頁面。例如,在本例中,只需嵌套一個簡單的...

  • 完美解碼播放器怎么樣,完美解碼同時播放多個視頻

    完美解碼播放器怎么樣,完美解碼同時播放多個視頻 相關圖片完美解碼擴展模式播放當我們觀看視頻時,不可避免地會遇到我們不想看的情節。如果我們直接跳過,有時會妨礙情節的連續性。此外,音像不符的情況也時有發生。此時可以使用控制...

  • 用戶思維,用戶思維概念

    用戶思維,用戶思維概念 相關圖片用戶思維經營用戶在開始討論之前,我將首先提出兩個應用研究領域的人們經常問的問題,即我為什么要做應用研究?我能為我的生意做什么應用研究?為了回答這兩個問題,我把自己...

  • 電腦的配置基本知識,如何查看電腦配置參數

    電腦的配置基本知識,如何查看電腦配置參數 相關圖片電腦虛擬配置對于那些喜歡玩游戲的人來說,擁有一臺好電腦是非常重要的。那么如何查看計算機配置信息呢?下面,超人軟件編輯就給大家帶來一個玩游戲的電腦配置推薦,希望大家...

  • exe是什么,msdt.exe

    exe是什么,msdt.exe 相關圖片svchost.exe是什么在使用迅雷的過程中,用戶發現在檢查的過程中有一個xlueops.exe文件,占用了大量內存,這也是電腦卡住的原因。什么是xlueops.exe?我可以關閉或刪除電腦exe文件不能運行...

  • cs3怎么用,cs3

    cs3怎么用,cs3 相關圖片gcs3在GAP閃存中關閉形狀跟隨功能,當你添加運動時,將會有更多的標準化和靈活的設計。另一方面,你的角色在解剖學上會更正確。至少有時候你能找到制作動畫的方法,在需要真cs3是...

  • pscs5用序列號怎么安裝,photoshop序列號 破解

    pscs5用序列號怎么安裝,photoshop序列號 破解 相關圖片aics5序列號永久序列號Photoshop CS5是專業圖像處理軟件PS的一個流行版本。一些合作伙伴詢問他們是否有Photoshop CS5的永久序列號,并希望激活Photoshop cs5激活碼...

關注微信

变脸官网查询