更改单个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

尝试这样的事情：

li {
   display: inline;
   vertical-align: top;
   line-height: 25px;
}

在此之后我得到了这个结果：

Answer 3

我明白了。我做了：

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

Answer 4

试试这个

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

我只是将图标和文字保存在同一个人的

中

Answer 5

您可以将margin-bottom添加到<img>以解决此问题。

li img {
    margin-bottom: 3px;
}