Question

我正在妻子的商业网站invisionbilling.com上工作，在垂直对齐标题中的电子邮件地址和社交图标时遇到困难。我想在标题栏的中心垂直对齐电子邮件地址。这也将使其与社交图标保持一致。我一直在检查元素并查看CSS，但似乎无法做出正确的调整。以下是我认为会影响它的CSS。谁能帮我解决这个问题？谢谢！

div#header-widget-area {
    float: right;
    padding-left: 25px;
}

header .header_top .header_link {
    list-style: none;
    text-align: right;
    margin: 0;
}

header .header_top .header_link li {
    display: inline-block;
    margin-left: 10px;
    position: relative;
}

Answer 1

您似乎拥有一盒clearfix。

只需将“ clearfix”类添加到“ header_link”元素，然后将电子邮件li标签的CSS添加：

header .header_top .header_link li {
    display: inline-block;
    margin: 9px 5px;
    position: relative;
}

那应该修复它！在此处阅读有关clearfix的更多信息：What is a clearfix?

如何在标头中对齐2个不同的元素？

1 个答案: