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

css中margin:0 auto無效的解決方法

黄舟
發布： 2017-07-21 13:41:34
原創
5008 人瀏覽過

css中margin:0 auto無效的解決方法

<div class="div1" style="width:100%; height:60px; float:left; background:#CCC;">
<div class="div2" style="width:auto; height:100%; margin:0 auto; background:#F00;">111111111</div>
</div>
登入後複製

div1寬度是螢幕寬度，div2寬度隨內容大小而定並居中與div1，但div2的寬度我設為auto後寬度還是div1 100%的寬度，為什麼會這樣？研究了整晚都沒搞懂，希望有高手可以解答？

給div2外套一個div3，設定div3為水平居中顯示，即text-align:center;div2設定為內聯元素，即display:inline;這樣就可以啦。

css中margin:0 auto無效的解決方法

　　div預設為區塊級元素，區塊級元素都是獨自佔一行的，寬度預設為100%的。

在IE8下執行此段程式碼  沒有居中  除了body設定text-align:center  還有其它解決方法嗎？ 

<!doctype html><html>
    <head>
        <style>
            .tcenter{                width:500px;                margin:0 auto;
            }        </style>
    </head>
    <body>
        <div class="tcenter">没有居中。。</div>
    </body></html>
登入後複製

親測IE8居中沒問題

css中margin:0 auto無效的解決方法

#你要文字居中就設定.tcenter{text-align:center}

#margin:0 auto; 是讓div居中的，不是讓文字居中的。

以上是css中margin:0 auto無效的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
auto css margin
來源：php.cn
上一篇：css中關於auto屬性的使用詳解 下一篇：css：margin:0 auto在ie8下面不能居中的解決辦法
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
有沒有辦法強制彈性框中的文字垂直居中，無論我們有什麼其他 CSS 程式碼？ 我有以下CSS程式碼，它是我正在開發的網站中使用的更大CSS程式碼的一部分：.cards-u{display:flex;flex-wrap:wrap;justify-content...
來自於 2024-04-06 20:41:51
0
1
518
父級的填充被黏性定位的子級忽略 如何防止黏性元素進入標題後面？當前程式碼片段在父級上使用填充頂部，我也嘗試在額外的子級上使用margin-top或透明50px邊框，但它似乎不起作用。我知道在這種情況下我可以輕鬆地...
來自於 2024-04-06 11:42:51
0
1
338
為什麼具有固定寬度和最大寬度為90%的網格子項會溢出網格軌道？ 問題：我的問題非常簡單，我想知道為什麼.header元素在達到1500像素的視窗寬度時會溢出其網格軌道。程式碼：*{box-sizing:border-box;padding:0;...
來自於 2024-04-05 14:33:39
0
1
1426
如何使用 CSS 刪除 Next.js 中井字遊戲板上每行下方的空格？ 為什麼每一行下面都有一個空格？ （CSS）我正在嘗試製作一個Next.js井字遊戲應用程式來測試我的技能。但是，我遇到了css問題。似乎每行板下方都存在填充問題-每行下方都有一個小...
來自於 2024-04-05 11:39:02
0
1
1431
在手機尺寸畫面上，如何將段落向左移動的CSS和HTML方法 在正常的16:9電腦螢幕上看起來很完美，文字在左邊，圖片在右邊。但是，當涉及到較小的螢幕（例如手機尺寸的螢幕）時，它確實會像我想要的那樣在段落頂部顯示圖片。我對此很陌生，所以請幫忙...
來自於 2024-04-04 20:25:22
0
1
330
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！