I'm currently working on creating a unique header design for my website, where I want one element to be centered and another element to be right-justified within the header.
After brainstorming different approaches, I came up with the following methods:
Using float - JSFiddle
#centerHeader { display: inline-block; height: 100%; vertical-align: middle; } #socialLinks { height: 100%; display: inline-block; vertical-align: middle; float: right; }Using absolute positioning - JSFiddle
#centerHeader { display: inline-block; height: 100%; vertical-align: middle; } #socialLinks { height: 100%; display: inline-block; vertical-align: middle; position: absolute; right: 10px; }
The issue arises where the social links/images are no longer vertically aligned in the header as intended. Despite setting them to inline-block with a height of 100% and using 'vertical-align: middle', they end up sticking to the top of the page instead. (Referenced from source)
Additionally, when employing the float method, I encountered another problem where the centered element is not horizontally aligned within the header but rather placed next to the social links, aligning within its own div which is not my desired outcome.
If you have any advice or suggestions on how I can achieve the desired layout of having a centrally positioned main element with right-justified elements all inline and vertically centered, it would be greatly appreciated!