ブロック見出しを中心にした垂直配置

Question

シンプルなフレックスベースのテーブルを作成しました。私の地元のプロジェクトに表示されていることに反し

section { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    width: 100%; 
 
    margin: 0; 
 
    background-color: green; 
 
} 
 

 
h2, ul { 
 
    width: 50%; 
 
    padding-left: 1.5em; 
 
    padding-right: 1.5em; 
 
} 
 

 
h2 { 
 
    text-align: right; 
 
    vertical-align: middle; 
 
} 
 
    
 
h2 { 
 
    background-color: blue; 
 
} 
 

 
ul { 
 
    background-color: yellow; 
 
}

<section> 
 
    <h2>Heading</h2> 
 

 
    <ul> 
 
    <li>foo</li> 
 
    <li>bar</li> 
 
    <li>baz</li> 
 
    <li>baz</li> 
 
    <li>baz</li> 
 
    </ul> 
 
</section>

すべての

まず、h2とul子供たちはスニペット内のセクションの高さの100％を取ることはありません。どうして？

主な問題：ブロックにsectionとそのテキストを縦に中央に揃えてください。私の目的は左右のセルのbackground-colorを別々に変更することです。私はvertical-alignオプションを設定しましたが動作しません。どうして？

Answer 1

に必要なものは何でも、あなたはh2にdisplay: flexを使用する必要があり、その後、あなたは右のテキスト整列をしたい場合align-items: center、およびjustify-content: flex-endを設定します。また、マージンを削除して、アイテムを同じ高さにすることもできます。

section { 
 
    display: flex; 
 
    margin: 0; 
 
    background-color: green; 
 
} 
 
h2, 
 
ul { 
 
    flex: 1; 
 
    padding-left: 1.5em; 
 
    padding-right: 1.5em; 
 
    margin: 0; 
 
} 
 
h2 { 
 
    background-color: blue; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
    color: white; 
 
} 
 
ul { 
 
    background-color: yellow; 
 
}

<section> 
 
    <h2>Heading</h2> 
 

 
    <ul> 
 
    <li>foo</li> 
 
    <li>bar</li> 
 
    <li>baz</li> 
 
    <li>baz</li> 
 
    <li>baz</li> 
 
    </ul> 
 
</section>

Answer 2

フレックスALIGNを使用し（-items、-self）垂直整列のため

section { 
 
    align-items: center; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    width: 100%; 
 
    margin: 0; 
 
    background-color: green; 
 
} 
 

 
h2, ul { 
 
    width: 50%; 
 
    padding-left: 1.5em; 
 
    padding-right: 1.5em; 
 
} 
 

 
h2 { 
 
    text-align: right; 
 
    align-self: center; 
 
} 
 
    
 
h2 { 
 
    background-color: blue; 
 
} 
 

 
ul { 
 
    background-color: yellow; 
 
}

<section> 
 
    <h2>Heading</h2> 
 

 
    <ul> 
 
    <li>foo</li> 
 
    <li>bar</li> 
 
    <li>baz</li> 
 
    <li>baz</li> 
 
    <li>baz</li> 
 
    </ul> 
 
</section>

Answer 3

ライン高さを定義する必要が

行の高さ：100pxに。またはあなたの中にこれを行うにはH2