アイコンの位置を揃えたい

日本語 ディスカッション 技術的なQ＆A
1

いつもお世話になっております。

フッターに、facebook, instagram, LINEを並べて表示させているのですが、LINEだけコードで表示させているため、画像のように、高さとアイコン間隔がズレてしまっています。

ym915_0-1681698844686.png
ym915_0-1681698844686.png299×122 2.68 KB

高さについては、

vertical-align: middle;

vertical-align: bottom;

vertical-align: text-bottom;

など、色々試してみましたが、無反応で全く動かず、困っています。

テーマは、Dawnで、

コードは、social-icons.liquid内に次のように入れています。

<img src=“https://scdn.line-apps.com/n/line_add_friends/btn/ja.png”
alt=“友だち追加” height=“24” border=“0” vertical-align: bottom;>

アイコンの高さと間隔を調整する方法を教えていただけないでしょうか。

よろしくお願い致します。

2

Ym915 様

お世話になっております。

ご質問確認いたしました。

全体のコードを見ていないので、可能性の話になりますが、LINEのアイコン画像が高さ24pxであるのに対し、FacebookとInstagramのアイコン画像が高さ24pxではないため、ズレが生じているのではないでしょうか。

アイコン間隔を調整するには、まずアイコン画像をすべて同じ高さに揃える必要がありますので、3つのアイコンの高さを30pxにします。

次に、アイコン間隔を調整するために、margin-rightプロパティを使用して、以下のようにCSSを追加してみてください。

[](https://www.facebook.com/)
[](https://www.instagram.com/)
[
![友だち追加|232x72](upload://n3w91hMBDaavrfHDw0e0phI5dRc.png)
](https://lin.ee/n8Pc3H5)

3つのaタグ以外に以下を適用 {
  margin-right: 10px;
}

なにかヒントになれば幸いです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。