テキストはどこにでも簡単に追加できますが、配置がないと見栄えが悪く、見栄えが悪くなります。整列されていないテキストは、Web ページ全体の外観を乱すこともあります。 Web アプリケーションでこのようなことに取り組むために、CSS の便利なプロパティを使用して、テキストをすぐに揃えることができます。
この記事では、CSS でテキストを縦に揃える方法を紹介します。
CSSでテキストを縦に揃える方法は？
CSS では、以下のプロパティを使用してテキストを垂直方向に揃えることができます。
-
- line-height プロパティ
- display および align-items プロパティ
それでは、それぞれの方法を1つずつ見ていきましょう！
方法 1: line-height プロパティを使用して、CSS でテキストを垂直方向に揃える
「 行の高さ 」プロパティは、インライン要素の下および上方向の領域を指定します。他のアイテムからのテキストの距離を設定します。 line-height プロパティを使用すると、テキストを簡単に中央に垂直に揃えることができます。
例
これは、現在左上にあるボックス (境界線) 内のテキストです。このテキストを垂直方向と水平方向の中央に揃えてみましょう。
それでは、次の方法に移りましょう。 「 フレックスボックス 」は、HTML をフォーマットできる 1 次元レイアウトです。また、アイテムを縦または横に並べるのにも使用できます。 それでは、例を挙げて、フレックスボックスを使用してテキストを垂直方向に揃えてみましょう。 例 まず、「 画面 ”プロパティとして” フレックス 」。次に、「 整列項目 コンテンツを縦中央に配置するプロパティ。また、コンテンツを左右中央に揃えるために、「 正当化コンテンツ 」 プロパティが使用されます。 CSS では、「 行の高さ ' 財産。また、「 フレックスボックス “ を使用してテキストを垂直方向に配置するには、“ 画面 ' と ' 整列アイテム ' プロパティ。 Flexbox は 1 次元のレイアウトであり、単純に項目を垂直方向または水平方向に配置するために使用されます。この投稿では、CSS でテキストを垂直方向に揃えるのに役立つ 2 つの最も簡単な方法を紹介しました。
これを行うには、コンテナを追加します “
最高の教育ウェブサイト !
分周 >
ボックスは「 3px 「ボーダーと」 250px ' 身長。 「 フォントサイズ ” プロパティは値とともに使用されます “ 24ピクセル 」 フォントを表示します。 div に「 行の高さ ' の ' 250px 」 を使用して、テキストを垂直方向に中央に揃えます。次に、「 テキスト整列 ” プロパティを使用して、テキストを中央に揃えます。
行の高さ: 250px;
テキスト整列: 中央;
フォントサイズ: 24px;
高さ: 250px;
ボーダー: 3px ソリッド;
}
ご覧のとおり、テキストは、line-height を使用して中央に垂直に配置され、text-align プロパティを使用して中央に水平に配置されています。 方法 2: CSS で display および align-items プロパティを使用してテキストを垂直方向に揃える
画面： フレックス ;
整列項目: センター;
正当化コンテンツ: センター;
フォントサイズ: 24px;
高さ: 200px;
ボーダー: 3px ソリッド;
}
指定されたテキストが正常に中央に配置されました:
CSS でのテキストの垂直方向の配置に関連するメソッドを提供しています。 結論