これは一般的な問題であることはわかっていますが、うまくいった解決策を見たことがないので、聞いてください。
この中央の div は jsfiddle では完全に機能しますが、私のクロム拡張機能では機能しません。私のクロム拡張機能では、この css を含む div を特定の Web ページの本文に動的に追加します (document.body.appendChild を使用) が、表示されません。さらに調べてみると、アクセスしている Web サイトが独自のスタイルを div に適用していることがわかります。これが影響するかどうかはわかりません。
html:
.myDiv{
position: fixed;
/* center the element */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
/* give it dimensions */
min-height: 10em;
width: 90%;
background-color: red;
}
CSS:
<div class="myDiv">
<p>coolio</p>
</div>
私のスタイルのみを適用して、任意の Web ページに div を動的に追加する方法はありますか? body 要素に追加される、固定された動的な幅の中央の div が必要です。