css - 中间带圆圈的单杠

Question

我正在尝试创建一个横跨容器整个宽度的横条。在栏的中间，我想要一个水平/垂直居中的圆圈。圆圈将与水平条重叠。现在我可以得到它所以水平对齐但我很难将圆圈后面的条垂直居中。这是我的代码:

#wrapper {
width: 1200px;
height: auto;
margin: 0 auto;
}

#navigation {
display: block;
width: 100%;
height: 50px;
background-color: #275337;

}

#navstamp {
background: white;
width: 218px;
    height: 218px;
      -moz-border-radius: 50%; 
      -webkit-border-radius: 50%; 
    border-radius: 50%;
    margin: 0 auto;
    border: 1px solid;
    border-color: rgba(19, 36, 17, 1);
}

还有我的 HTML:

<div id="wrapper">
<div id="navigation">
    <div id="navstamp">

    </div>
</div>
</div>

如有任何帮助，我们将不胜感激!

Answer 1

我会使用 css3 ::before这里的伪元素，如果古浏览器支持不是问题的话，

<div id="wrapper"> <!-- replaced the navigation with ::before-->
    <div id="navstamp">
    </div>
</div>

#navstamp::before {
 display: block;
 content:""; // add the content you need here
 position:absolute;
 top:50%;
 left:0;
 width: 100%;
 height: 50px;
 background-color: #275337;
}

如本JSFiddle