vertical-alignment - html - Flex-direction: column 中央 - divの内容を下に整列させる方法

Display: flex align-items: center / html / css

例えば、以下のようなCSSとHTMLのコードがあるとします。

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

johannchopin



Answer #1

親要素の表示タイプをフレックスに設定する必要があります。

div.parent {
  display: flex;
  height: 100%;
}

そして、子要素のalign-selfをflex-endに設定します。

span.child {
  display: inline-block;
  align-self: flex-end;
}