ホームページ > ウェブフロントエンド > CSSチュートリアル > 複数の DIV ブロックを水平方向に整列させるにはどうすればよいですか?

複数の DIV ブロックを水平方向に整列させるにはどうすればよいですか?

Linda Hamilton
リリース: 2024-11-03 14:03:02
オリジナル
965 人が閲覧しました

How to Align Multiple DIV Blocks Horizontally?

複数の DIV ブロックを水平方向に整列する

複数の DIV ブロックを同じ水平線上に配置することは、Web 開発における一般的なレイアウト タスクです。これを実現するには、以下の手順に従います。

text-align: center; で 親 DIV を設定します。

親 DIV 内で、子 DIV を表示: inline; に設定します。これにより、同じ行に並んで座ることができます。

<code class="css">#block_container {
  text-align: center;
}

#bloc1,
#bloc2 {
  display: inline;
}</code>
ログイン後にコピー

内容例:

<code class="html"><div id="block_container">
  <div id="bloc1"><?php echo " version " . $version . " Copyright &copy; All Rights Reserved."; ?></div>
  <div id="bloc2"><img src="..."></div>
</div></code>
ログイン後にコピー

追加の考慮事項:

  • 生のコンテンツを DIV 要素内に直接配置することは避けてください。

    のような適切なタグを使用してください。または <スパン>

  • 例:
    <p id="bloc1"><?php echo " version ".$version." Copyright &copy; All Rights Reserved."; ?></p>

デモ:
https://jsfiddle.net/

以上が複数の DIV ブロックを水平方向に整列させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート