More than 3 years have passed since last update.

文字をfloat: leftして、中身を縦中央に揃える

Posted at 2021-05-06

保存用

floatをつかって、別々の要素を左に寄せて、かつ寄せた要素の中の文字を中央寄せ

下記で最初は問題なかったが、アニメーションをｊｓで加えた瞬間効かなくなり、要素が改行された。

disply: flex;
align-items: center;

floatを使用し同じ段落へ持ってこようとしたが、disply: flexが打ち消され今度は中央揃えができなくなった。

float: left;
disply: flex;
align-items: center;

そこでググり、line-heightを使うことで、無事、要素を左寄せし、縦に中央寄せできた。(heightとline-heightのピクセル数は一緒)

float: left;
height: 〇〇px;
line-height: 〇〇px;