こんにちは！
今回は「テキストとアイコンを横並びにしたらバランスがおかしくなってしまった！」
という方のためのに対処法をお伝えしていきます。
まずはHTMLとCSSの中身を見ていきましょう。
親要素に display: flex; でテキストとアイコンを横並びにしています。
実際にブラウザで確認してみます。
テキストよりアイコンが下にズレているのが分かります。
このズレを修正するには、align-itemsというプロパティを使います^^
親要素に align-items: center; を追加しました！ブラウザを確認してみましょう。
綺麗に水平にテキストとアイコンが並びましたね！
この align-items を使う時には必ず display が設定されていることが条件になります。
それでもうまくいかない場合はアイコンの大きさやフォントサイズ等もズレる原因となりますので検証ツールを使ってうまく調節してみてくださいね^^
以上、初心者の私の備忘録でした！★
コメント