您現在的位置是:電腦技術吧?>? 基礎知識 ??>??css元素垂直居中,css實現元素垂直居中??>??正文詳情

css元素垂直居中,css實現元素垂直居中

常子亦2019-11-13 21:21:15 人圍觀
簡介css元素橫向居中表格單元格可以方便地設置文本和圖像的水平和垂直中心,使元素垂直居中:將該元素的容器設置為表格單元格,具有表格單元格的特性,然后使用垂直對齊css水平居中

table-cell輕松設置文本圖片水平垂直居中  讓一個元素垂直居中的思路:把這個元素的容器設置為table-cell,也就是具有表格單元格的特性,再使用vertical-align(這個屬性對block元素不起作用,但對table-cell元素是有效的)設置元素垂直居中,即可達到我們想要的效果。

  IE7及以下版本不支持此方法,IE8及以上版本及大部分的主流瀏覽器都很好的支持。

  HTML代碼 代碼如下 div class=img img src=../images/a-1.jpg alt= / /div 樣式規則 .img{ display:table-cell; vertical-align:middle; width:400px; height:500px; text-align:center; border:#CCC 1px solid; } /*IE7不支持該方法*/   使用相對定位使元素水平和垂直居中  利用相對定位使元素水平居中:要求元素有固定的寬度,設置元素的left:50%,這樣元素的左邊邊界線和該元素的父級元素的水平方向的中線重合,設置margin-left,值為負的元素寬度的一半,讓元素向左移動半個寬度的位置,就可以使元素水平方向的中線與父級元素的中線重合,即實現了元素的水平居中。

  舉例:讓一個容器元素水平居中顯示,寬度:960px;  width:960px; position:relative; left:50%; margin-left:-480px;  上面這段代碼和下面的這段代碼等價,使用margin:0 auto;讓元素居中,被廣泛的使用,大家都很熟悉  width:960px; margin:0 auto;  利用相對定位使元素垂直居中:要求元素有固定的高度,設置元素的top:50%,這樣元素的上邊邊界線和該元素的父級元素的垂直方向的中線重合,設置margin-top,值為負的元素高度的一半,讓元素向上移動半個高度的位置,就可以使元素的垂直方向的中線與父級元素的中線重合,即實現了元素的垂直居中。

  以下是利用相對定位實現元素水平和垂直居中的示例,父級元素.box,該元素占據的空間寬度250px,高度150px;(計算進padding的值) 代碼如下 .box{ width:300px; height:200px; border:#CCC 1px solid; } .box span{ display:block; width:240px; height:140px; background-color:#CCC; position:relative; top:50%; left:50%; margin:-75px 0 0 -125px; padding:5px; }   示例要實現的效果:讓span這個元素在.box中水平垂直居中,首先將span變成一個塊級元素,使之水平居中可以使用margin:0 auto;這是我們常用的,在這里,我們使用相對定位來實現。

  使用line-height讓單行文字垂直居中  這種方式是我們大家經常用到的,讓標題,按鈕等的文字垂直居中,IE6/7/8/9/10,FF,Chrome,Safari都支持  . 代碼如下 box_1{ width:300px; height:55px; line-height:55px; text-align:center; border:#ccc 1px solid; }   使用絕對定位讓元素水平垂直居中 代碼如下 .box_2{ width:300px; height:200px; border:#CCC 1px solid; position:relative; top:0; left:0; } .box_2 span{ display: block; width:240px; height:140px; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background-color:#ccc; padding:5px; } /*IE7不支持,移動端的網頁開發可以使用這種方式*/

版權聲明:本文由 常子亦 整理編輯。

原標題:css實現元素水平垂直居中,css元素居中

轉載注明出處:http://www.dn9ww09s.icu/basics/11948.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 本地連接獲取不到網絡地址,本地連接正在獲取網絡地址怎么辦

    本地連接獲取不到網絡地址,本地連接正在獲取網絡地址怎么辦 相關圖片本地連接連不上近日,Windows 7系統用戶反映,電腦開機后,網絡連接一直顯示“獲取網絡地址”,過一段時間就會變成“無法獲取網絡地址”。此問題導致網絡連接無法訪問Inter本地連接...

  • 文本溢出顯示省略號,多行文本溢出省略號隱藏

    文本溢出顯示省略號,多行文本溢出省略號隱藏 相關圖片多行元素的文本省略號CSS文本溢出省略號文本溢出:省略號文本溢出是一個特殊屬性,由W3C的早期文檔定義(當前文檔不包含文本溢出屬性FML!)as:名稱:文本-單行文本省略號...

  • 電腦安裝系統,電腦系統重新安裝步驟

    電腦安裝系統,電腦系統重新安裝步驟 相關圖片電腦怎么安裝系統軟件現在很多人想在購買新電腦時安裝自己喜歡的系統。目前的系統主要分為四種:原來的XP系統、兼容性好的win7系統、先進的win8系統和市場上最新的win10系統電腦安...

  • attr和,attr怎么用

    attr和,attr怎么用 相關圖片matterattr()特性自css2.1標準以來就一直存在,但現在它才變得流行起來。它提供了一種在CSS中使用HTML標記上的屬性的聰明方法,這可以幫助您在許多情況下保存attempt...

  • 電腦軟件亂碼怎么修復,亂碼修復工具

    電腦軟件亂碼怎么修復,亂碼修復工具 相關圖片亂碼軟件現在很多人在使用電腦時,有時會遇到各種各樣的問題。例如,系統的中文顯示會出現代碼混亂,這也是故障之一。怎么了?我們怎樣才能解決這個問題?現在我會告訴你具體...

  • 安全模式怎么解除dnf,dnf安全模式解除不了

    安全模式怎么解除dnf,dnf安全模式解除不了 相關圖片dnf永久取消安全模式如何去除DNF安全模式是很多小伙伴頭疼的問題,因為玩家無法在安全模式下進行敏感的操作,如出售裝備、丟棄道具、拆卸裝備等,會給人這樣的提示,影響心情。...

  • 無法應用轉換程序,編寫一個程序

    無法應用轉換程序,編寫一個程序 相關圖片數制轉換這個功能主要是為了方便UBB發布。一。自動識別圖片、超鏈接、字體顏色、粗體、斜體和下劃線字體的HTML代碼,并將其轉換為UBB代碼。2。兼容htmlheadti能將高級語言轉換成目標...

  • 打印機出錯怎么解決,打印機常見問題及解決方法

    打印機出錯怎么解決,打印機常見問題及解決方法 相關圖片打印機顯示無法打印打印機作為一種重要的辦公設備,當它不能打印時,很多人都在討論如何處理它。打印機無法打印的原因有很多。如果我們遇到打印機不能打印,我們應該從簡單到...

  • 四行八列,四行五列

    四行八列,四行五列 相關圖片四行一列的面板首先看效果:這里是源代碼:htmlheadtitletest/titletype type=text/CSSUl{margin:0px;padding:0px;四行三列行列式計算器...

  • mrt文件用什么軟件打開,增強mrt是什么

    mrt文件用什么軟件打開,增強mrt是什么 相關圖片.bat是什么文件當我們認為大多數用戶會打開資源管理器來關閉一些不必要的流程以節省資源時,但是當我們看到很多流程時,我們不知道是否有任何影響。mrt.exe進程是許多用戶不知道它...

熱評文章

  • 此網站出具的安全證書不是,瀏覽器打開出現證書錯誤

    此網站出具的安全證書不是,瀏覽器打開出現證書錯誤 相關圖片網站安全證書怎么安裝相信當一些用戶瀏覽網站時,會提示他們網站的安全證書有一個解決問題的方法。首先要檢查的是系統時間是否正確。大部分時間是由時間問題引起的。如果時間...

  • display在那里用,html里display

    display在那里用,html里display 相關圖片display怎么用顯示:block是塊對象的顯示:none不是要顯示qu1:我經常看到有一個層,然后在里面寫一些東西,然后給它一個屬性顯示:none,這樣這個東西就不能在網頁上看on display...

  • 臺式機怎么分屏顯示器,臺式機如何實現分屏

    臺式機怎么分屏顯示器,臺式機如何實現分屏 相關圖片分屏電腦怎么組裝只有很多情況下,同一臺電腦連接兩臺顯示器,并在不同的屏幕上顯示,但案件的實質是一臺電腦。如果由于計算機的負載能力差,需要同時使用兩臺計算機,希望將...

  • 電腦亮度怎么調對眼睛最好,臺式電腦怎么調節亮度

    電腦亮度怎么調對眼睛最好,臺式電腦怎么調節亮度 相關圖片電腦屏幕亮度如何調有時如果我們的電腦沒有電源,它會自動跳轉到節能模式,這樣我們的電腦屏幕就會顯得有點黑,而且眼睛也有一定程度的損傷,那我們怎么再調整呢?下面是如何...

  • 語義化標簽都有什么,常用的語義化標簽有哪些

    語義化標簽都有什么,常用的語義化標簽有哪些 相關圖片html5語義化標簽優點在當前的web標準隱藏規則中,不推薦甚至反對使用B和I標記,因為它們被認為表示粗體和斜體,沒有任何語義。在新的HTML5工作草案中使用更多的strong和EM標html5語義化...

  • 0xc000007b,0xc000007b無法正常啟動

    0xc000007b,0xc000007b無法正常啟動 相關圖片0xc000007b win10在運行程序時,很多用戶遇到應用程序無法正常啟動0xc000007b的提示,導致程序無法正常打開。實際上,這個問題主要是由系統軟件或其他原因造成的。然后,應用程序開機藍...

  • ie 兼容性,ie怎么設置兼容性

    ie 兼容性,ie怎么設置兼容性 相關圖片ie添加兼容性站點HTML5有一個很好的屬性,占位符。當鼠標集中在它上面時,提示文本將消失。在失去焦點后,它將再次出現:但是在不支持較低版本HTML5的瀏覽器中,占位符屬性無效。...

  • 000007e藍屏,藍屏0ed

    000007e藍屏,藍屏0ed 相關圖片藍屏000008e很多用戶反映,這臺電腦剛買下來,藍屏錯誤碼ox0000007e無緣無故出現。0x0000007e error表示系統進程遇到問題,如果遇到此類問題,應該怎么辦?0x0000007e藍屏...

  • 打印機出現錯誤,打印機出現錯誤怎么辦

    打印機出現錯誤,打印機出現錯誤怎么辦 相關圖片打印機出現錯誤狀態是怎么回事隨著我們的素質、工作和生活的不斷提高,效率的提高也越來越高。打印機解決了過去需要通過復制來完成的工作。它不僅節省了時間,而且保證了數據...

  • 設計師,室內設計師的一天

    設計師,室內設計師的一天 相關圖片設計師是干什么的羅馬尼亞UI設計師Paul Flavius nechita今年6月29日開始了為期100天的UI挑戰賽。他為自己設定了一個目標,每天設計一個UI界面,每天花大約ui設計師資格證...

關注微信

变脸官网查询