line-heightを指定すると前の要素の画像が動いてしまう

Question

要素にline-heightを指定し、
文字を中央に揃えようすると、
前の要素の画像も一緒に動いてしまいました。
原因が全くわからず、どのようにすれば画像は動かないようにできるのでしょうか？？

＊動いた画像にmargin-top:-15px;とすると、中央に戻ります。
共通で指定されているline-height:1.5が原因なのでしょうか？

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

<ul class="category-list">
    <li class="category">
        <a class="category__link" href="#">
          <div class="category__div">
            <img class="category__img" src="hoge">   // 動かしたくない画像
            <label class="category__name">カテゴリー</label>   // line-heightを指定して中央に揃える
          </div>
        </a>
    </li>
</ul>

// 共通で line-height: 1.5; が記述されている状態

.category-list {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
    font-size: 0;
    margin-bottom: 100px;
}

.category {
    width: 380px;
    height: 140px;
    display: inline-block;
    margin-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.category__inner {
    position: relative;
}

.category__img {
    width: 100px;
    height: auto;
}

.category__name {
    display: inline-block;
    width: auto;
    font-size: 16px;
    line-height: 6.25;
    margin-left: 15px;
}

Comments

[gin]

上記のコードだけだとline-heightがあってもなくても何にも変化しませんね。

Answer 1

こういうことですか？

.category__img {
    vertical-align: middle;
}
```**動くサンプル：**[https://jsfiddle.net/f35kdt4j/](https://jsfiddle.net/f35kdt4j/)

---

**追記：**

CSSの確認にはデベロッパーツールを使うとはかどります。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
[http://ryus.co.jp/blog/customize-php-search-1/](http://ryus.co.jp/blog/customize-php-search-1/)

【Chrome デベロッパーツールの使い方概要 | Web Tips】
[http://weback.net/utility/1410/](http://weback.net/utility/1410/)

【Web関係者は知っておくべきGoogleChromeデベロッパーツールの使い方 | Ocadweb】
[http://ocadweb.com/web/googlechromedevelopertools](http://ocadweb.com/web/googlechromedevelopertools)

Comments

[退会済みユーザー]

理由はわかりませんが、`vertical-align:middle`が効かない状態になっています。
すいません、説明不足でした。

[kei344]

提示したサンプルはみられましたか？また、それも効いていませんか？

[退会済みユーザー]

見させて頂きました！
効いていません...

[kei344]

サンプルの表示も効いていない状態という事であれば、ブラウザの問題ではないでしょうか。サンプルについては FirefoxとChrome / IEで確認しましたが、`vertical-align:middle`は効いている状態です。

[gin]

質問のコードミスだと思いますが、コメントアウトになっていない「// 動かしたくない画像」「// line-heightを指定して中央に揃える」で効いていないと思っているのかも…

[kei344]

To: ginさん
たしかにコードのどこかで「/* */」ではなく、誤って「//」を使っているかもしれませんね。

[gin]

htmlの中っす
「// 動かしたくない画像」ではなく「<!-- 動かしたくない画像-->」ですね

[退会済みユーザー]

すいません、認識違いでした。
頂いたサンプルは動いていました。

自分の方にvertical-alignを指定しても変わりませんでした。

[退会済みユーザー]

もう少し原因を探ってみます。
お二方ありがとうございました。

[gin]

指定するのは「.category__name」にではなく「.category__img」にですよ？

[退会済みユーザー]

To: ginさん
はい。「.category__img」に指定しました。

[kei344]

どのように解決したかコードを回答欄に追記いただけませんか？このページに辿り着いた同じような疑問を持つ人のために、ぜひお願いします。

[退会済みユーザー]

vertical-alignなどは使わずに、display:flexを使用して、center揃えにしました。