html - 在导航栏内垂直居中一个圆形 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;
}

我希望它看起来像什么:

现在的样子:

fiddle :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。

在这里查看工作 fiddle :http://jsfiddle.net/R8nGu/3/