Webページ上の要素を整列および浮動させる方法

ウェブページ上のアイテムの配置は、その全体的なデザインにとって不可欠です。 テーブルを使用するなど、レイアウトに影響を与える他の方法もありますが（ 推奨しません ）、 CSSを使用するのが最良です 。

以下では、簡単なCSSスタイルのインラインプロパティを使用して画像、表、段落などを整列させる方法を見ていきます。

注：これらの同じメソッドは外部スタイルシートでも使用できますが、これらは個々のアイテムに適用され、そのように留まる必要があるため、以下で説明するようなインラインスタイルを使用することをお勧めします。

テキスト段落の整列

段落タグは、あなたのWebページのレイアウトを開始する最初の場所です。 開始タグと終了タグは次のようになります。

段落内のテキストのデフォルトの配置は、ページの左側にありますが、段落を右揃えと中央揃えにすることもできます。

floatプロパティを使用すると、段落を親要素の右または左に揃えることができます。 その親要素内の他の要素は、浮動要素の周りを流れます。

パラグラフで効果を最大限に引き出すには、段落にコンテナ（親）要素よりも小さい幅を設定することをお勧めします。

パラグラフ内のテキストを整列する

間違いなく、段落テキストの最も興味深い整列は、「正当化」です。これは、ブラウザに、本質的に、ウィンドウの右側と左側の両方に整列したテキストを表示するように指示します。

段落内のテキストを正当化するには、text-alignプロパティを使用します。

また、text-alignプロパティを使用して、段落内のすべてのテキストを右側または左側（デフォルト）に揃えることもできます。

text-alignプロパティは、要素内のテキストを揃えます。 技術的には、段落や他の要素の中に含まれているイメージを整列させることは想定されていませんが、ほとんどのブラウザはイメージをこのプロパティのインラインとして扱います。

イメージの整列

イメージタグのfloatプロパティを使用すると、ページ上のイメージの配置とテキストのラップアラウンド方法を定義できます。

上の段落と同じように、イメージタグのfloatスタイルプロパティはイメージをページ上に配置し、ブラウザにテキストやその他の要素の流れを伝えます。

上記のイメージタグに続くテキストは、イメージが画面の左側に表示されると、イメージの周りを右に流れます。

テキストをイメージの周りで折り返していないようにするには、clearプロパティを使用します。

段落以上に整列する

しかし、単なる段落や画像以上のものを整列させたい場合はどうすればよいでしょうか？ すべての段落にスタイルプロパティを置くことができますが、より効果的なタグを使用することができます：