html - Having centered element and right-justified element in header all vertically aligned -

i'm trying make header web page 1 element in middle of header, , 1 right-justified in header.

the ways think of doing was:

1. using float - jsfiddle

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

2. 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 problem both of these methods, social links/images no longer vertically aligned header, rather hugging top of page despite me setting them inline-block height of 100%, , vertical-align: middle. (source of reasoning trying vertical align method)

with float method, there appears additional problem of centered element not being horizontally centered within header, rather placed next social links , centered within own div not i'm looking for.

any pointers on how achieve desired result of having horizontally centered element right-justified elements inline , vertically centered appreciated!

one solution add relative header wrapper , positioning social links using absolute top value.

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 social links 40px height }