html - 個々の li タグの行の高さを変更する

Question

電話番号と電子メール アドレスを、横にある小さなアイコンと縦方向に揃えたいと考えています。行の高さを変更しようとしていますが、その領域のすべての行の高さが変更さliれます。インラインだからだと思います。サイトとcssはこちら。

リンク: www.matthewtbrown.com/newsite

HTML:

<ul class="contact"> 
    <li><img src="http://s7.postimg.org/64ux9a1if/email.png"></li>
    <li class="contacttext">mbrown74@rocketmail.com</li>
    <li><img src="http://s7.postimg.org/g0w08x7af/phone.png"></li>
    <li class="contacttext">978-761-1205</li>
</ul>

CSS:

.contact {
    color: #fff;
    text-align: center;
    float:none;
    }


.contact > li {
    display: inline;
    }

.contacttext {
    font-size: 19px;
    padding-left: 5px;
    }

Answer 1

ここで、vertical-alignインライン要素を互いに整列させる役割を果たします。

あなたの場合、次のように動作するはずです：

.contacttext{
   vertical-align:text-top;
}

liまた、適切に含めたい場合imgは、デフォルト以外のディスプレイタイプが必要であることに注意してくださいinline-inline-block最も適している可能性があります。

Answer 2

わかった。やった：

.contacttext {
    font-size: 19px;
    padding-left: 5px;
    display:inline-block; 
    vertical-align:middle;
  }

Answer 3

この問題を解決するには、に追加できmargin-bottomます。<img>

li img {
    margin-bottom: 3px;
}