1. ホーム
  2. html

[解決済み] div内のコンテンツを整列させる

2022-04-25 17:19:45

質問

HTMLでコンテナ内のコンテンツをcssスタイルのtext-alignで整列させています。これは、コンテンツがテキストであるか、ブラウザがIEである間はうまく機能します。しかし、そうでない場合はうまくいきません。

また、その名の通り、基本的にはテキストを整列させるために使用します。alignプロパティは、かなり前に非推奨となりました。

htmlでコンテンツを整列させる他の方法はありますか?

どのように解決するのですか?

text-alignは、テキストやその他のインラインコンテンツを整列させます。ブロック要素の子要素の位置は揃えない。

そのためには、整列させたい要素に幅を与え、左右のマージンを「auto」にする必要があります。これは標準に準拠した方法で、IE5.xを除くすべての場所で機能します。

<div style="width: 50%; margin: 0 auto;">Hello</div>

IE6で動作させるためには 標準モード は、適切なDOCTYPEを使用することでオンになります。

IE5/Quirks Mode を本当にサポートする必要がある場合 (最近ではそうする必要はありませんが)、2つの異なるアプローチを組み合わせて中央揃えにすることが可能です。

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(もちろん、スタイルはスタイルシートの中に入れるのがベストですが、インラインバージョンは説明のためです)。