要素を水平方向に中央に配置すると、機能があまり直感的ではないため、少し奇妙になることがあります。text-align:center;
本当に、あなたはandを使ってゲームをするmargin:auto,
必要があり、いつ which を使うべきかを知る必要があります。
たとえば、ボタンや入力を含む要素 (raw-text) のコンテンツを中央揃えにしたい場合は、 を使用できますtext-align:center
。
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
</div>
コンテナに他の要素を追加すると、それらの要素の幅は 100% に強制されます。これは、技術的には 100% で中央にあるため、中央にあることをエミュレートするのに役立ちます。ばかげていますよね?
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
<p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p>
</div>
ただし、幅プロパティが定義されている場合は、margin: auto
スタイルを使用して親の中央に配置できます。
<div style="margin:auto;border:1px solid black;width:300px;" >
I am centered!
</div>
どのソリューションが最適かを判断する必要があります。もっとお役に立てれば幸いですが、問題の HTML が提供されていない場合、どのソリューションがお客様のニーズに最も適しているかを判断するのは困難です。
いずれにせよ、この JSFiddleが問題の解決に役立つことを願っています!