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

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

中鴻煊2019-11-17 23:50:34 人圍觀
簡介設置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/program/13324.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 電腦已禁用ime怎么恢復,已禁用ime怎么解決

    電腦已禁用ime怎么恢復,已禁用ime怎么解決 相關圖片怎么解除禁用輸入法最近,許多小伙伴報告說,他們在電腦屏幕右下角有一個禁用輸入法的提示。那么,殘疾輸入法是什么意思呢?如何解決禁用輸入法?接下來,超人軟件會一一為你...

  • 列表增加元素,增加記憶的元素

    列表增加元素,增加記憶的元素 相關圖片怎樣補充鐵元素向窗口添加HTML元素除了可以使用XUL的所有元素外,還可以直接向XUL文件的內部添加HTML元素。現在您可以在XUL文件中使用任何HTML元素,這意味著您可以補充鐵元素...

  • 手機默認瀏覽器怎么設置,電腦怎么改默認瀏覽器

    手機默認瀏覽器怎么設置,電腦怎么改默認瀏覽器 相關圖片番茄社區官方下載因為ie是windows系統的瀏覽器,所以它被正式設置為默認瀏覽器。但是,由于每個人的首選項都不同,因此要設置的默認瀏覽器也不同。如何設置默認瀏覽器?如果默認...

  • 被執行人是什么意思,性中xt是什么意思啊

    被執行人是什么意思,性中xt是什么意思啊 相關圖片fpx是什么意思VPS技術是虛擬專用服務器的全稱虛擬專用服務器技術,可以將一臺服務器劃分為多個虛擬專用服務器。你可以把VPS看作是服務提供商提供給你的一臺計算機,但我們只經營...

  • 讓人流連忘返的,這是一個讓人流連忘返

    讓人流連忘返的,這是一個讓人流連忘返 相關圖片讓我們流連忘返今天,當模板在世界各地飛來飛去的時候,創建一個博客似乎是一件非常簡單的事情,不是嗎?平臺就在那里,博主只需要發布。有什么困難?但實際情況是,有成千上...

  • 配置可交換顯示卡有什么用,沒有配置可交換顯示卡

    配置可交換顯示卡有什么用,沒有配置可交換顯示卡 相關圖片win7沒有配置可交換顯示卡可交換顯示卡允許用戶在集成顯示卡和獨立顯示卡之間自由切換,但有些用戶仍然不知道如何配置可交換顯示卡。一些用戶還發現可交換顯示卡的配置丟失。怎...

  • 超級鏈接方法,創建超級鏈接的方法

    超級鏈接方法,創建超級鏈接的方法 相關圖片舉例創建超級鏈接的方法在線問答網友問,如何在Dreamweaver8中批量刪除超鏈接?解決方案,打開Dreamweaver-Edit-find-and-replace(或直接使用快捷超級鏈接在什么選項卡...

  • desktop文件刪除后果,desktop.ini是什么文件?

    desktop文件刪除后果,desktop.ini是什么文件? 相關圖片徹底刪除360注冊表近日,不少網友反映桌面上出現了desktop.ini文件。我可以刪除desktop.ini嗎?什么文件是desktop.ini?現在,超人軟件將帶給你桌面桌面上有desktop文件...

  • 院感基礎知識培訓小結,黨的基礎知識培訓小結

    院感基礎知識培訓小結,黨的基礎知識培訓小結 相關圖片院感知識培訓小結及效果評價現將畫布的知識點總結如下,供大家隨時參考。一。填充矩形圓角矩形(x,y,寬度,高度);2。繪制矩形邊框strokrect(x,y,width,height);3黨的基本知識...

  • 怎么設置隱藏文件夾,怎樣隱藏文件夾

    怎么設置隱藏文件夾,怎樣隱藏文件夾 相關圖片電腦隱藏文件夾怎么顯示當系統處于安全考慮時,它將隱藏系統的一些關鍵文件和文件夾。當我們需要對這些文件執行某些操作時,首先需要顯示這些隱藏的文件夾。如何顯示隱藏文件...

熱評文章

  • 臺版上癮全集未刪減網盤,電腦版百度網盤加好友

    臺版上癮全集未刪減網盤,電腦版百度網盤加好友 相關圖片mac百度網盤怎么加好友百度云最大的亮點是好友可以共享資源。那么,百度云如何添加好友呢?百度云好友共享的文件在哪里?我不想說太多。接下來,超人軟件編輯將為您介紹百度云...

  • Flash動畫實例教程,flash動畫

    Flash動畫實例教程,flash動畫 相關圖片flash8動畫制作一。首先,準備要滾動的圖片,將幾個圖片導入flash庫,在庫中右鍵單擊它們,選擇屬性,并在使用導入的JPEG質量之前移除掛鉤,這樣文檔的體積就會小得多,單擊Inflash動...

  • 飛豬怎么加速搶火車票,攜程快還是飛豬搶火車票

    飛豬怎么加速搶火車票,攜程快還是飛豬搶火車票 相關圖片為什么飛豬搶火車票合法面對即將到來的元旦假期,我相信你們已經準備好了通過飛豬購買火車票。飛豬怎么能搶火車票?現在,超人軟件編輯將為您介紹飛豬是如何為您搶火車票的,...

  • 電腦的開機啟動項在哪設置,電腦怎么進入啟動項選擇

    電腦的開機啟動項在哪設置,電腦怎么進入啟動項選擇 相關圖片計算機啟動項怎么設置我相信很多朋友在開機的時候會看到開機項目太多的提示,電腦啟動速度慢。此時,只要取消一些計算機啟動項,就可以解決問題。計算機啟動項集在哪里?什么...

  • html canvas,html2canvas

    html canvas,html2canvas 相關圖片html2canvas沒有樣式canvas方法save()保存當前環境的狀態restore()返回以前保存的路徑狀態,屬性createevent()getcontext()返回一個對象,指示html解析 canvas...

  • ps怎么畫虛線路徑,ps怎么畫一條虛線

    ps怎么畫虛線路徑,ps怎么畫一條虛線 相關圖片ps里怎么畫虛線矩形最近,很多PS用戶都表示,他們需要在工作中使用PS來畫虛線,但他們不知道如何畫虛線。別說太多。接下來,超人軟件將為您介紹PS虛線教程。希望你喜歡!如何畫虛...

  • 比深度搜索好用的app,深度搜索app官方

    比深度搜索好用的app,深度搜索app官方 相關圖片和深度搜索一樣的app我們以前研究過數據圖的最佳表達式。隨著移動應用的不斷發展,我們將數據圖的性能擴展到了手機上。與在web上顯示數據的空間優勢相比,需要考慮手持設備的方...

  • 電腦輸入法消失了怎么辦,電腦自帶輸入法不見了怎么辦

    電腦輸入法消失了怎么辦,電腦自帶輸入法不見了怎么辦 相關圖片切換輸入法的圖標不見一般來說,電腦輸入法會停留在屏幕右下角,但由于某些原因,電腦輸入法會突然消失。如果計算機輸入法的圖標丟失了怎么辦?如何設置計算機輸入法?接下來...

  • 站點如何刪除,刪除站點

    站點如何刪除,刪除站點 相關圖片可信站點刪除不了如何刪除Dreamweaver CS5中的站點,如何刪除Dreamweaver CS5中的站點?我之前就談到過如何建設一個網站,有時候很難避免犯錯。今天,編輯繼怎么刪除受限制的站點...

  • 安卓版手機格式工廠,.dat數據文件怎么打開

    安卓版手機格式工廠,.dat數據文件怎么打開 相關圖片200000000dat文件能刪除嗎許多人不知道計算機上的dat文件是什么或它的用途。Dat文件是一種數據文件,主要有兩種格式:一種是純文本文件,可以通過文本編輯工具打開;另一種是多媒體...

關注微信

变脸官网查询