CSS DIV 置中
文章推薦指數: 80 %
如果你習慣採用DIV 來做網頁的排版,那就難免會碰到需要讓DIV 置中的時候,在大部分主流的瀏覽器中,想要要讓DIV 置中,僅需要用到margin 就能夠達成,但在 I.
首頁
HTML
HTML5
PHP
MySQL
CSS
CSS3
JavaScript
軟體介紹
其它
Home › CSS › CSSDIV置中
CSSDIV置中
如果你習慣採用DIV來做網頁的排版,那就難免會碰到需要讓DIV置中的時候,在大部分主流的瀏覽器中,想要要讓DIV置中,僅需要用到margin就能夠達成,但在IE瀏覽器可就不是這麼一回事囉!這篇分享幾種不同的情況。
一、適用於大部分瀏覽器的DIV置中語法margin:0pxauto;這樣的寫法基本上適用於FireFox、GoogleChrome、Opera等常見主流瀏覽器。
二、適用於IE8的DIV置中語法
範例中使用到的background-color是背景顏色,主要目的僅是讓範例更容易呈現,另外width與height分別是div的寬度與高度。
三、適用於IE6與IE7的DIV置中語法_margin:0pxauto; //適用於IE6 *margin:0pxauto; //適用於IE7以上的DIV置中方式主要是讓整個DIV區塊置中,而不是DIV內的元素置中,如果你想要讓DIV內的文字、圖片或其他元素能夠置中,請參考CSStext-align與CSS文字垂直置中。
延伸閱讀CSSDIV區塊標籤的使用教學CSSmargin屬性與用法範例CSS文字垂直置中CSStext-align水平對齊CSSvertical-align屬性
您可能會想看
CSSspan區域文字字型設計
CSSspan區域邊框顏色與樣式設計
CSSspan區域背景顏色設計
CSSdisplay:inline-block效果
CSSa連結樣式效果設計
用CSS設計出三角形圖案
CSSdisplay屬性
CSSboxmodel盒子模型
CSSlist-style列表屬性
用CSS設計HTMLbutton按鈕大小
今日熱門文章
MySQLSELECTWHEREdate等於上個月的條件判斷寫法
MySQLSELECTWHEREdate等於本月的條件判斷寫法
MySQLSELECTWHEREdate等於昨天的條件判斷寫法
PHPmysqli_set_charset函式設定字符編碼
PHP:mysqli_connect資料庫連線函式
MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法
MySQLSELECTWHEREdate等於今天的條件判斷寫法
HTMLdiv標籤
CSSAttributeSelectors屬性選擇器
替CSSspan區域增加陰影效果
即時熱門文章
MySQLSELECTWHEREdate等於上個月的條件判斷寫法
MySQLSELECTWHEREdate等於本月的條件判斷寫法
MySQLSELECTWHEREdate等於昨天的條件判斷寫法
PHPmysqli_set_charset函式設定字符編碼
PHP:mysqli_connect資料庫連線函式
MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法
MySQLSELECTWHEREdate等於今天的條件判斷寫法
HTMLdiv標籤
CSSAttributeSelectors屬性選擇器
替CSSspan區域增加陰影效果
©Copyrightwibibi.com網頁設計教學百科基礎的網頁設計規劃、資料庫與程式設計Since2012
延伸文章資訊
- 1【HTML】div 垂直置中 - 程式隨筆
本次要介紹的是CSS垂直置中(Vertical Align with css)的完整解決整理。 說實話這並不太容易,雖然不像水平置中{margin:0 auto;} 那樣單純, ...
- 2CSS DIV 置中
如果你習慣採用DIV 來做網頁的排版,那就難免會碰到需要讓DIV 置中的時候,在大部分主流的瀏覽器中,想要要讓DIV 置中,僅需要用到margin 就能夠達成,但在 I.
- 3用css 讓區塊水平垂直置中 - MUKI space
可以看到除了DIV 之外,文字也是垂直水平置中。 另外當你移動畫面時,他也會固定在 ... 進而讓垂直置中有用。 ▽ HTML 必須要有一組二層的巢狀結構:.
- 4[CSS學習筆記] 如何版面置中 - 1010Code
在網頁設計上會用 div 當容器把裡面內容包起來,這邊要示範容器置中。 chrome右鍵檢查,可以發現右下腳有個框框有margin、border、padding及長寬尺寸,這 ...
- 5CSS 垂直置中的七個方法
HTML: <table> <tr> <td> <div>表格垂直置中</div> </td> </tr> </table> <div class="like-table"> <div>假的表格...