Web 開発では、要素のレイアウトを適切に作成することが重要です。ただし、CSS3 Flexible Box などの多くの CSS プロパティは、Web ページや HTML 要素のレイアウトを調整するのに役立ちます。フレキシブル ボックスは、Web ページとアプリケーションを再帰的に配置するために使用されます。この Flexbox モードは、複雑な Web ページやアプリケーションのレイアウトを作成するのに役立ちます。
この投稿では、CSS を使用するすべてのブラウザーで垂直方向に div 要素を中央に配置する方法について説明します。
CSS を使用して div 要素を揃えるには?
div 要素は、表示プロパティ「 フレックス 」とCSS「 整列アイテム 「プロパティと」 正当化コンテンツ ' 財産。 「align-items」プロパティは要素を垂直方向に整列し、「justify-content」プロパティはコンテンツを水平方向に整列します。
例: CSS で div 要素を垂直方向に中央揃えする方法は?
HTML では、最初に「 HTMLコードは次のとおりです。 CSS では、div にいくつかのスタイル プロパティを指定します。 スタイル「メインコンテンツ」クラス 次の CSS プロパティは、「 メインコンテンツ ' クラス： 出力から、div 要素のコンテンツが中央にないことがわかります。 「 説明は次のとおりです。 出力 CSS を使用して、すべてのブラウザーで div 要素を垂直方向に中央揃えにする方法を学習しました。 div 要素を垂直方向に中央揃えするには、CSS “ 画面 」プロパティは「 フレックス ' 価値。この値により、
< 画像 ソース = '/images/laptop-notepad.jpg' すべての = 「メモ帳とペンを備えたラップトップ」 幅 = 「300」 >
< p > ラップトップはポータブル コンピューターとしても知られています。 なので ノートパソコン。 p >
分周 >
身長： 50 % ;
背景色: #46C2CB;
フォントサイズ: 24px;
パディング: 10px;
}
整列項目: センター;
結論