![[CSS]vertical-alignの効かない別要素同士のベースラインを揃える|2001Y.me](/img/css-another-block-baseline-700.jpg)
liをflexで横並びにした上で、英字と日本語を別フォントにするとベースラインが崩れる。同じ要素であれば揃うけど、別要素になるとずれる。
<ul>
<li>HI-TEC-C</li>
<li>ジェットストリーム</li>
</ul>
line-heightを指定する
line-heightを両方に指定してあげれば揃った。heightではダメ。
li {
line-height: 1em;
}
liをflexで横並びにした上で、英字と日本語を別フォントにするとベースラインが崩れる。同じ要素であれば揃うけど、別要素になるとずれる。
<ul>
<li>HI-TEC-C</li>
<li>ジェットストリーム</li>
</ul>
line-heightを両方に指定してあげれば揃った。heightではダメ。
li {
line-height: 1em;
}