この「InTheWoods」ブログ投稿を読んだ後、私は疑問に思いました:
CSS3に垂直方向の中央揃えのワンショットの方法がないのはなぜですか?
<div>
CSS属性vertical-align: center
を使用してを作成し、コンテンツを垂直方向の中央に配置できないのはなぜですか?
この「InTheWoods」ブログ投稿を読んだ後、私は疑問に思いました:
CSS3に垂直方向の中央揃えのワンショットの方法がないのはなぜですか?
<div>
CSS属性vertical-align: center
を使用してを作成し、コンテンツを垂直方向の中央に配置できないのはなぜですか?
vertical-align: center
コンテナを作ったら使えますdisplay: table-cell
名前は少し紛らわしいかもしれません。css宣言vertical-align
は、一部のコンテンツをその親の内部で垂直方向に中央揃えするためのものではありません(テーブルセルについて話している場合を除く)。むしろ、ルールが宣言されている要素の垂直方向の配置を設定するためのものです。
inline-block
これは、いくつかの要素を隣り合わせに配置して動作させるために使用している場合に便利です。
Flexible Box Layout Moduleをサポートしたい場合があります:
概要
この仕様では、ユーザー インターフェイスのデザインに最適化された CSS ボックス モデルについて説明します。フレックス レイアウト モデルでは、フレックス コンテナーの子は任意の方向に配置でき、未使用のスペースを埋めるためにサイズを大きくしたり、親のオーバーフローを避けるためにサイズを縮小したりして、サイズを「変更」できます。子の水平方向と垂直方向の配置は、簡単に操作できます。これらのボックスのネスト (垂直内の水平、または水平内の垂直) を使用して、2 次元のレイアウトを構築できます。
そして、提案された仕様からこれに注意してください:
フレックス コンテナは、そのコンテンツの新しいフレックス フォーマット コンテキストを確立します。これは、ブロック レイアウトの代わりにフレックス レイアウトが使用されることを除いて、ブロック フォーマット コンテキストの確立と同じです。フロートはフレックス コンテナーに侵入せず、フレックス コンテナーのマージンはコンテンツのマージンと一緒に折りたたまれません。フレックス コンテナーは、ブロック コンテナーとまったく同じように、コンテンツの包含ブロックを形成します。
フレックス コンテナーはブロック コンテナーではないため、ブロック レイアウトを想定して設計された一部のプロパティは、フレックス レイアウトのコンテキストでは適用されません。特に:
- Multicol モジュールのすべての「column-*」プロパティは、フレックス コンテナーには影響しません。
- 'float'と'clear'はフレックス アイテムには影響しません。
- 'vertical-align'はフレックス アイテムには影響しません。
この仕様はまだ初期段階であり、以前のバージョンが (これによって) 置き換えられていることに注意してください。そのため、「解決」されるべきと思われるいくつかの一般的なレイアウトの問題を解決しようとしていますが、実行可能と呼び始めるのはまだ早いようです。
でも希望は持てますよね?