[解決済み] 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>
(もちろん、スタイルはスタイルシートの中に入れるのがベストですが、インラインバージョンは説明のためです)。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] div 内の画像を縦に並べる方法
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] CSS Flexboxで、"justify-items "と "justify-self "プロパティはなぜないのですか?
-
[解決済み] preタグでテキストを折り返すにはどうしたらよいですか?
-
[解決済み] テーブル内のテキストアラインクラス
-
[解決済み] メモ帳++でXML/HTMLを自動整形/インデントする方法
-
[解決済み] CSSでdivを縦にスクロールできるようにする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] CSS - カーソルを置いたときに塗りつぶしの色を変更する - SVG PATH
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] クリアフィックスとは何ですか?
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] Flexbox:水平方向と垂直方向の中央揃え
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] 入力フィールドに :before や :after 疑似要素を使用できますか?
-
[解決済み] HTMLのレイアウトにテーブルを使用しない理由は?[クローズド]
-
[解決済み] CSSでdivを縦にスクロールできるようにする
-
[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は?