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 可能最适合。