javascript - 画面が最大幅の場合にのみ要素を中央揃えにする (min-width プロパティを追加)

Question

画面が最大幅の場合にのみ要素を中央揃えにする

現時点では、画面の幅を計算し、要素の「左マージン」を screen.width/2 - element.width/2 に設定することで、さまざまな要素を (JavaScript によって) センタリングしています。

これは、ユーザーがウィンドウのサイズを変更したときに、要素が画面の絶対中央に留まり、ウィンドウのサイズが 50% 未満に変更されると見えなくなるようにするためです。

これは、最大幅のみを中央に配置する典型的な方法ですか、それとも同じ効果を達成するためのより簡単な CSS アプローチはありますか?

私が達成しようとしている効果の例: Khanacademy.com のロゴ。

[編集] hangerstar のおかげで、問題の根本原因を突き止めることができました。min-width を設定しない場合、margin: 0 auto は常に要素を中央に保ちます。

Answer 1

中央に配置する必要があるが、左揃えまたはその他の書式設定を維持する必要がある要素のグループがある場合 (つまり、見出しの後にリスト付きの段落が続く場合)、次の操作を実行できます。

HTML

<div id="wrapper">
     <div class="outer">
         <div class="inner">... Content...</div>
     </div>
</div>

CSS

#wrapper {
     margin: 0 auto;
     width: 900px;
}
.outer {
     height: 50px;
     left: 50%;
     position: relative;
     display: inline-block; /* or float: left; */
}
.inner {
     right: 50%;
     position: relative;
}

Answer 2

css を使用してこれを実現できます。

margin: 0 auto;

例