Question

我正在尝试为我的网页制作一个标题，标题中间有一个元素，标题中有一个右对齐。

我能想到的唯一方法是：

使用float - JSFiddle

#centerHeader {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#socialLinks {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    float: right;
}

使用绝对定位 - JSFiddle

#centerHeader {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#socialLinks {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 10px;
}

问题在于，使用这两种方法时，社交链接/图像不再垂直对齐标题，而是拥抱页面的顶部，尽管我将它们设置为高度为100％的内联块和vertical-align：middle。（source我的理由是尝试这种垂直对齐方法）

使用float方法，似乎还存在另一个问题，即居中元素实际上并不是在标题内水平居中，而是放在社交链接旁边并居中于其自己的div中，这不是我正在寻找的对

关于如何实现具有水平居中元素以及所有内联和垂直居中的右对齐元素的预期结果的任何指针都将非常感激！

Answer 1

一种解决方案是相对于Header Wrapper添加并使用绝对顶值正确定位社交链接。

Updated JSfiddle

#homeHeader {
height: 75px;
padding: 10px;
text-align: center;
background-color: #181818;
border-bottom: 1px solid #505050;
position:relative;
}
#socialLinks {
position: absolute;
right: 10px;
top:50%;
margin-top:-20px; //considering the social links are 40px height
}

将标题中的中心元素和右对齐元素全部垂直对齐

1 个答案: