表内、テキストと画像の縦位置がずれる(HTML, CSS)

table内にあるテキスト（Awesome Font）と、画像の縦位置がずれてしまいます。
WordPressを使って建てられた友人のサイトの手直しを手伝っているのでソースコード全体をまだ追えていない状況なのですが、手がかりだけでも分かればと思いますので一般的に考えられる原因などがあれば教えていただければ大変たすかります！
テーマはAVANTというものを使っております。

HTMLは以下のような内容になっています。

HTML
1<div class="container" id="container01">
2  <div class="container-inner">
3    <ul class="ulclass01">
4    <table style="margin-left: 1rem;">
5      <tbody style="background: #fff; font-size: 5rem;">
6        <tr>
7	      <th style="padding: 1rem;">
8	        <a href="//www.facebook.com/">
9              <i class="fab fa-facebook-square" style="color: #7c9dec;"></i>
10            </a>
11	      </th>
12          <th style="padding: 1rem;">
13		     <a href="https://twitter.com/">
14          	 <i class="fab fa-twitter-square" style="color: #7dcdf7;"></i>
15             </a>
16          </th>
17        </tr>
18	    <tr>
19		  <th style="padding: 1rem;">
20            <a href="http://line.me/">
21              <img src ="lineicon.png" width="70px" height="70px"></div>
22	        </a>
23          </th>
24          <th style="padding: 1rem;">
25            <a href="www.instagram.com">
26		      <img src ="/wp-content/uploads/2019/02/Instagram_Icon.png" width="70px" height="70px"></div>
27		    </a>
28          </th>
29        </tr>
30      </tbody>
31    </table>
32    </ul>
33  </div>
34</div>

スタイルシートを見たところでは、tableやtr、thに対するスタイルの指定は見当たりませんでした。
（もしかしたら見落としている可能性もあるのですが。。。）

表示結果としては、以下のようにFont Awesomeの文字ロゴは上下中央に表示されるのですが、画像ロゴはやや下側に表示されてしまいます。（vertical-alignも試してみたのですが同じ結果でした。）

よろしくお願いいたしますm(_ _)m

退会済みユーザー

2019/02/17 01:39

テーマ名を教えてください

nitok

2019/02/17 01:45

ご指摘ありがとうございます！記載漏れてしまっておりました。AVANTというテーマを使っております。本文にも追記致しました！

yu-smc

2019/02/17 03:25

回答者側で実際の動作状況を確認できないので、原因を特定する情報が足りず検証できない状況です。該当の画像をアイコン開発者ツールのインスペクタで指定したときに、特にmarginやpaddingがなく下側にポンと配置されてしまっているという状況であっていますか？

nitok

2019/02/17 23:38

インスペクタで確認したところ、img要素すべてにvertical-align: bottom; が指定されていたことが原因でした。初歩的なことに気がつかづ申し訳ありませんでした。今回のSNSロゴにクラスを設定し、当該クラスにvertical-align: baseline; を設定したところ解決しました。インスペクタというヒントをいただいたおかげで気付くことができました！（友人の頼みで久々にWebサイトをいじったのですが、インスペクタの存在を忘れていました。）ありがとうございました！！

行動規範の内容に同意します

回答3件

<ul>の子要素として<table>は不適切です。HTMLの組み方を見直されると良いかと思います。

参考
【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

レイアウトの不具合であれば、その状況が再現されるコードを提示されると、より良い回答を得れるかと思います。

-追記-
以下のCSSを追加してみてください。

CSS
1img {
2  display: block;
3}

投稿2019/02/17 04:06

編集2019/02/17 04:31

yoshinavi

総合スコア3523

nitok

2019/02/17 23:35

ありがとうございます！ulは、確かに私も不自然だと思いましたがそのままにしておりました。が、意味はなさそうだったので念のため削除いたしました。インスペクタで確認したところ、img要素すべてにvertical-align: bottom; が指定されていたことが原因でした。初歩的なことに気がつかづ申し訳ありませんでした。

行動規範の内容に同意します

初歩的なことだったのですが、おそらくWordPressテーマのスタイルで、img要素全てにvertical-align: bottom;が設定されていたことが原因でした。
今回のロゴ画像部分にクラスを設定し、当該クラスにvertical-align: baseline;を設定することで解決しました。
ご回答、ご指摘くださった皆様ありがとうございました。初歩的なことに気がつかずおさわがせして申し訳ありませんでした！！

投稿2019/02/17 23:40

nitok

総合スコア8