強制CSS樣式屬性在頁面上居中元素

我有一個場景，我有一個複雜的Web應用程序，它使用了很多CSS/JS框架/庫，並且我的一個頁面上的<div>未正確渲染。強制CSS樣式屬性在頁面上居中元素

這裏是我的代碼片段，但我很遺憾無法提供，因爲涉及的大量JS/CSS框架的完整代碼示例：

<body> 
    <div style="margin: 0 auto;" id="centerme"> 
     <h1 style="margin: 0 auto;">You'll need an invitation to access<br/>retailer connection setups</h1> 

     <div style="margin: 0 auto;" class="well"> 
      <h2>How can I get such wow?</h2> 
      <h3> 
       It looks like you need much amaze. 
      </h3> 
     </div> 

     <h3>For reals? Rejoice!</h3> 
    </div> 
</body>

所以我想要做的就是裏面的中心一切centerme div水平。目前，上述嘗試不工作，但根據CSS Tricks，我只需要下面的樣式應用到我的div：

.centerme { 
    margin: 0 auto; 
}

現在是我的理解任何style屬性我適用於任何HTML元素將始終優先於其他管理該元素的風格/規則，是嗎？！？那麼爲什麼它不是優先於我的代碼？

換句話說：什麼style屬性可以設置，這將強制瀏覽器居中我的div無論其他規則已被定義？

來源

2016-01-06 smeeb

這是優先考慮在你的代碼？用瀏覽器檢查器檢查你的頁面，看看'margin：auto;'是否被另一個樣式覆蓋 –

你的div需要有一個定義的寬度爲保證金自動工作：

集合寬度：

#centerme { 
    margin: 0 auto; 
    width: 500px; 
}

來源

2016-01-06 19:54:14

居中動態寬度的最簡單方法就是顯示它的內嵌塊，然後用'text-align ：中心;'。（我假設你的意思是沒有設置寬度，取決於內容）'absolute'方法只有在設置了寬度的情況下才有效。 –

@Jacob Gray，真的，我的壞。感謝您的意見。 –

動態居中：https：//jsfiddle.net/Hunter377/0ma1kena/1/ –

如果要居中動態寬度元素，你既可以：

.centerme { 
 
    display: table; /*shrink-to-fit*/ 
 
    margin: 0 auto; 
 
}

<div class="centerme">yes</div>

或：

.container { 
 
    text-align: center; 
 
} 
 
.container .centerme { 
 
    text-align: left; /*reset if necessary*/ 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="centerme">yes</div> 
 
</div>

來源

2016-01-06 20:03:36 Stickers

這是動態執行此操作的最佳方法。 –

你的選擇是一個ID <div style="margin: 0 auto;" id="centerme">

，但你指出的一類.centerme {}

必須使用#指向一個ID #centerme {}

也#centerme必須有一個定義width

例如：

#centerme { 
    width: 90%; 
    margin: 0 auto; 
}

來源

2016-01-06 20:15:00 Sebastian

強制CSS樣式屬性在頁面上居中元素

回答

相關問題