我正在尝试创建一个横跨容器整个宽度的横条。在栏的中间,我想要一个水平/垂直居中的圆圈。圆圈将与水平条重叠。现在我可以得到它所以水平对齐但我很难将圆圈后面的条垂直居中。这是我的代码:
#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>
如有任何帮助,我们将不胜感激!
最佳答案
我会使用 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
关于css - 中间带圆圈的单杠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22886690/