html - 更改单个 li 标签的 line-height

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>

我只是将图标和文本保留在同一个 li 中

Answer 5

你可以添加margin-bottom到你的<img>来解决这个问题。

li img {
    margin-bottom: 3px;
}