両方の列がまっすぐになるように CSS でテキストを配置するにはどうすればよいですか?

CSS (Cascading Style Sheets) は、HTML ドキュメントの外観と書式設定を指定するために使用されるスタイル シート言語です。 CSS を使用すると、コンテンツのプレゼンテーションを Web ページの構造から切り離すことで、Web サイトのレイアウト、色、フォント、その他のスタイルを制御できるようになります。

CSS の display: table プロパティを使用して表のような構造を構築すると、CSS でテキストを配置するときに両方の列が真っ直ぐになるようにできます。次に、display: table-cell 属性を使用するときに、テキストを適切に配置するために各列のvertical-align 属性として top またはbottom を設定します。

＃＃＃方法＃＃＃

CSS でテキストを整列させる一般的な方法を次に示します -

テキスト配置プロパティの使用
表示属性を使用する
フローティング プロパティを使用する
次に、例を挙げて各方法を詳しく理解しましょう。

方法 1:「text-align」属性を使用する

CSS でテキストを (両方の列を直線に) 揃える最初の方法は、「text-align」プロパティを使用することです。コンテナ要素内のテキストは、text-align プロパティを使用して整列できます。中央、左揃え、整列などの値を受け入れます。

＃＃＃例＃＃＃

次の例では、「text-align」プロパティを使用して CSS でテキストを整列する方法を学習します。

ステップ 1

- div などのコンテナ要素を HTML に作成します -

リーリー

ステップ 2 - コンテナ要素内の 2 つの列に対して 2 つの子要素を作成します - リーリー

ステップ 3- CSS スタイルをコンテナ要素と列要素に追加する必要があります - リーリー

ステップ 4 - 列要素にコンテンツを入力します - リーリー

ステップ 5 - コンピュータのブラウザで結果をプレビューすると、テキストが 2 つの直線の列に配置されていることがわかります。

ステップ 6 - 最終的なコードは次のようになります - リーリー

方法 2:「表示属性」を使用する

柔軟なレイアウトを作成するには、表示プロパティを flex または Grid に設定します。 justify-content プロパティと align-items プロパティを使用すると、さまざまなレイアウト モードで要素の位置を管理できます。 ＃＃＃例＃＃＃

次の例では、display 属性を使用して CSS でテキストを整列する方法を学習します。

ステップ 1

- div などのコンテナ要素を HTML に作成します -

リーリー

ステップ 2

- コンテナ要素内の 2 つの列に対して 2 つの子要素を作成します -

リーリー ステップ 3

- CSS スタイルをコンテナ要素と列要素に追加する必要があります -

リーリー ステップ 4

- 列要素にコンテンツを入力します -

リーリー ステップ 5

- コンピュータのブラウザで結果をプレビューすると、テキストが 2 つの直線の列に配置されていることがわかります。

ステップ 6

- 最終的なコードは次のようになります -

リーリー 方法 3:「float 属性」を使用する

float 属性を使用すると、要素を親コンテナの左側または右側にフロートさせることができます。これを使用して、複数の列に配置されたテキストを作成し、複数列のレイアウトを作成できます。

＃＃＃例＃＃＃ 次の例では、Float プロパティを使用して CSS でテキストを整列する方法を学習します。

ステップ 1

- div などのコンテナ要素を HTML に作成します -

リーリー

ステップ 2

- コンテナ要素内の 2 つの列に対して 2 つの子要素を作成します -

リーリー

ステップ 3

- CSS スタイルをコンテナ要素と列要素に追加する必要があります - リーリー

ステップ 4

- 列要素にコンテンツを入力します - リーリー

ステップ 5

- コンピュータのブラウザで結果をプレビューすると、テキストが 2 つの直線の列に配置されていることがわかります。

ステップ 6

- 最終的なコードは次のようになります - リーリー ＃＃＃結論は＃＃＃ text-align 属性でも CSS の display 属性でも、テキストを 2 つの直立列に整列させることができます。表示属性は、要素をブロックレベル要素として表示するかインライン要素として表示するかなど、要素のレイアウトを示します。

以上が両方の列がまっすぐになるように CSS でテキストを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。