在导航栏内垂直居中圆圈div

Question

我为我的网站设计了一个导航栏。在atackoverflow的一些非常善良的人的帮助下，我学会了table-cell和inline-table显示属性的使用，并将每个标签的标题居中。

但是，相同的方法无法工作，而不是文本，我有一个圆形div位于选项卡内。它似乎推动了所有其他标签的定位。

HTML：

<div id="headContainer">
        <div id="rightBar">
            <a href="index.html"><div class="navelement" style="border-bottom: 5px solid #6217FF;"><span>home</span></div></a><!--
            --><a href="about.html"><div class="navelement"><span>about</span></div></a><!--
            --><a href="feedback.html"><div class="navelement"><span>feedback</span></div></a><!--
            --><a href="contact.html"><div class="navelement"><span>contact</span></div></a><!--
            --><a href="#"><div class="navelement"><span><div id="circle"></div></span></div></a>
        </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;
}

我希望它看起来像：

它现在看起来像什么：

小提琴：http://jsfiddle.net/R8nGu/1/

Answer 1

inline-table和inline-cell并不常用于此任务。相反，它是通过relative定位来完成的。此外，您的导航有一个非常奇怪的结构，让我们首先纠正（这是最常用的导航结构方法）：

<ul id="rightBar">
  <li><a href="index.html" style="border-bottom: 5px solid #6217FF;"><span>home</span></a></li>
  <li><a href="about.html"><span>about</span></a></li>
  <li><a href="feedback.html"><span>feedback</span></a></li>
  <li><a href="contact.html"><span>contact</span></a></li>
  <li><a href="#"><span id="circle"></span></a></li>
</ul>

垂直居中内容的一项众所周知的技术是在相对定位的元素上同时使用top和margin-top属性。设置top: 50%，然后将margin-top设置为元素高度的减半。在您的情况下，假设跨度的字体大小为1.2rem，则为margin-top: -0.6rem;。

你可以为你的圈子做同样的事情：它是50px高，所以margin-top应该是-25px。

在这里查看工作小提琴：http://jsfiddle.net/R8nGu/3/