ページdivモジュール設定中央
971 ワード
中央揃え
プロフェッショナルフロントエンドではないため、多くのスタイルは設定されません.したがって、インターネット上で検索されるフロントエンドの設定方法のいくつかは、divの前の設定の問題による中央に位置しないことを無視することができます.
具体的には、divラベルを指定するcssスタイルに追加します.コードは次のとおりです.
htmlページ:
cssページ:
#div_2{
display:flex;
flex-direction: column;
justify-content:space-around;
align-items:center;
}
display:flex; Flexレイアウトに設定すると、サブエレメントのfloat、clear、vertical-alignプロパティが無効になります.flex-direction: column; コンテナ内のアイテムの配列方向(デフォルトの横配列)justify-content:space-around;主軸上の項目の位置合わせalign-items:center;クロス軸上のアイテムの位置合わせ
垂直方向中央揃え
verticle-align:middle
によってCSS垂直中央を実現する.vertical-align:middleによるCSS垂直センタリングの実現は最も一般的な方法であるが、verticalが有効になる前提は要素の
display:inline-block
であることに特に注意する必要がある.1,不定幅の行内要素:text-align:center;またはHTMLの直接align=「center」ボタンの文字も同様にstyle=「text-align:center;width:100%;」2,定幅ブロック要素:margin:0 auto