Vertically center a circle div inside the navbar - html

Question

I designed a navbar for my site. With help from some really kind folks at atackoverflow, I was able to learn the use of table-cell and inline-table display attributes and center the headings for each tab.
However, the same method fails to work when instead of text, I have a circle div positioned inside the tab. It seems to push mess up the positioning of all other tabs.
HTML:
<div id="headContainer">
<div id="rightBar">
<div class="navelement" style="border-bottom: 5px solid #6217FF;"><span>home</span></div><!--
--><div class="navelement"><span>about</span></div><!--
--><div class="navelement"><span>feedback</span></div><!--
--><div class="navelement"><span>contact</span></div><!--
--><div class="navelement"><span><div id="circle"></div></span></div>
</div>
</div>
CSS:
#headContainer {
height: 80px;
width: 100%;
background-color: rgba(28, 35, 46,0.9);
transition:height 0.3s ease-out;
border:0px solid yellow;
position: fixed;
top: 0px;
z-index: 900;
overflow: hidden;
}
#headContainer:hover {
height: 120px;
}
#rightBar {
display: inline-block;
height: 100%;
border:0px solid cyan;
margin-left: 160px;
float: right;
}
.navelement{
display: inline-table;
height: 100%;
border-top:5px solid transparent;
padding-left: 50px;
padding-right: 50px;
padding-left: 3.5vw;
padding-right: 3.5vw;
color: #DFDFDF;
border-bottom: 5px solid transparent;
transition:all 0.3s;
border-top:5px solid #6217FF;
}
.navelement:hover{
background:#6217FF;
}
.navelement span {
display: table-cell;
font-size: 1.2em;
font-size: 1.2rem;
vertical-align: middle;
font-family: 'Open Sans';
}
#circle{
width:50px;
height:50px;
border-radius:50%;
background-color:green;
}
What I want it to look like:
What it looks like right now:
Fiddle: http://jsfiddle.net/R8nGu/1/

Answer 1

inline-table and inline-cell are not commonly used for this task. Rather, it is done with relative positioning. Also, your navigation has a very strange structure, let's correct that first (this is the most widely used approach for nav structures):
<ul id="rightBar">
<li><span>home</span></li>
<li><span>about</span></li>
<li><span>feedback</span></li>
<li><span>contact</span></li>
<li><span id="circle"></span></li>
</ul>
A well-known technique to vertically center content is to use the top and margin-top properties together on a relatively positioned element. Set top: 50%, then set margin-top to minus half of the height of the element. In your case, given that the spans have a font-size of 1.2rem, that would be margin-top: -0.6rem;.
You can do the same for your circle: it is 50px high, so the margin-top should be -25px.
Check out the working fiddle here: http://jsfiddle.net/R8nGu/3/