1. このページの目的
文字と画像を横に並べる場合の、縦方向の中央寄せを実験を行う。
特に、文字が多くて改行が発生する場合でも、「縦方向のずれ」をなくしたい。
2. デモ
2-1. コード
HTML
<div class="demo">
<span>ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。</span>
<img src="./circle40.png" height="40" width="40" alt="">
</div>
- 文字列と画像を並べて表示したい。
CSS
.demo {
display: flex;
align-items: center;
width: 300px; /* 改行を発生させるため */
}
- width を小さめに指定することで、改行を発生させる。
2-2. 結果
ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。
- 文字側に改行が発生しても、全体として縦方向のずれは発生しない。
- span と img を合わせた固まりに対して、中央寄せになっていることに注意する。
2-3. 補足説明
「2-2. 結果」に説明を入れると、こんな感じになる。
2-4. 比較実験（Grid を使ってみる））
ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。
HTMLは同じ。
CSS
.demo2 {
display: grid;
align-items: center;
width: 300px; /* 改行を発生させるため */
}
.demo2 span {
grid-row: 1 / 1;
grid-column: 1 / 2;
}
.demo2 img {
grid-row: 1 / 1;
grid-column: 2 / 2;
}
- グリッドないに配置する各要素に、それぞれ位置の指定が必要。そうしないと、要素が横並びにならない。
- flexの場合、デフォルトで中の要素が横並びになるが、grid はそうはならない。
- このような用途では、flexbox の方がラクである。