标题中的居中元素和右对齐元素都垂直对齐。

Question

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

我唯一能想到的办法是：

1. 使用浮点- JSFiddle #中心Header{显示:内联块；高度: 100%；垂直对齐:中间；}#社会化链接{高度: 100%；显示:内联块；垂直对齐:中间；浮动:右；}
2. 使用绝对定位- JSFiddle #中心Header{显示:内联块；高度: 100%；垂直对齐:中间；}#社会化链接{高度: 100%；显示:内联块；垂直-对齐:中间；位置:绝对；右:10 100；}

问题是，使用这两种方法，社交链接/图像不再垂直对齐到标题，而是拥抱页面的顶部，尽管我将它们设置为100%的内嵌块，并且垂直对齐:中间。(我尝试这种垂直对齐方法的推理的来源)

使用float方法，似乎还有一个额外的问题，即居中元素实际上并不是在标题中水平居中，而是放置在社交链接旁边，并且集中在它自己的div中，这不是我所要寻找的。

任何关于我如何能达到一个水平中心元素和右对齐元素的期望结果的指针，所有的内联和垂直中心都是非常感谢的！

Answer 1

一种解决方案是添加相对于标题包装和正确定位的社交链接使用绝对的最高值。

更新的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
}