简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

DIV常用的居中方法_html/css_WEB-ITnose

WBOY
發布： 2016-06-24 11:44:02
原創
990 人瀏覽過

一.DIV常用的居中方法：

①利用相对定位设置div外边距自动调整达到居中效果（ps:如果IE浏览器无效果还要在Body里面加上''text-align:center''这个属性,或是外面再加一层DIV，设置属性''text-align:center''），当然居中也有另一种写法：margin-left:auto;margin-right:auto             最重要的是div必须设置width属性

1 <body>2   <div style="width:500px;margin:0 auto">3        .......4   </div>5 </body>
登入後複製

②利用left和margin-left两个属性，先将div块设置为margin-left：50%（这表示这个div块的最左边那条边在中间），然后left属性值为div块宽度的负一半，

符号表示div向左边移动宽度的一半。补充说明一下：直接在css中设置left生效的前提是必须设置父容器position:absolute或relative

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7     #myDiv_1{ 8         width:300px; 9         height:200px;10         background-color:#F00;    11         12         margin-left:50%;13         position:absolute;14         left:-150px;15     }16 </style>17 </head>18 19 <body>20     <div id="myDiv_1"></div>21 </body>22 </html>
登入後複製

 

相關標籤：
DIV常用的居中方法
來源：php.cn
上一篇：9种网页Flash焦点图和jQuery焦点图幻灯片_html/css_WEB-ITnose 下一篇：不错的CSS3图文列表 还有鼠标悬停图片抖动_html/css_WEB-ITnose
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
在存取路線之前預先載入路線資料的最佳方法。 在為給定路由渲染頁面之前，我想先同步取得必要的資料。理想情況下，我希望在頁面組件中獲取數據，但我不反對在路由器文件中執行此操作。我已經閱讀並嘗試了各種方法，但部分挑戰來自於這樣一個...
來自於 2023-11-17 14:54:42
0
2
379
Vue專案中未定義模組 我剛剛通過運行npmini tvue@latest創建了一個新的Vue應用程序，如官方文件中指定的那樣。然後我嘗試按照Vue和Vite網站上的指南將Tailwind添加到我的應用程...
來自於 2023-11-17 12:38:53
0
2
394
更改時如何將鍵作為 v-for 的選擇選項值傳遞（VueJS） 我正在使用Vue3和Bootstrap5。我有一個select有多個選項。現在我正在顯示我的option.TEXT，當我更改某些內容時，這個value也將被傳遞到我的方法中。但當我...
來自於 2023-11-17 08:55:24
0
1
276
捕獲Guzzle的異常 我正在嘗試捕獲在我正在開發的API上運行的一組測試中的異常，並且我正在使用Guzzle來使用API​​方法。我已經將測試包裝在try/catch區塊中，但它仍然拋出未處理的異常錯誤...
來自於 2023-11-16 14:36:03
0
12
290
Laravel 9.x：註冊後重定向用戶查看成功訊息 我試圖在註冊用戶後返回一個包含成功訊息的視圖，其中包含指向登錄頁面的鏈接，但是會話訊息不會隨視圖一起傳遞。這是我的registred()方法protectedfunctionreg...
來自於 2023-11-12 22:55:21
0
1
336
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！