Horizontal Bar with Circle in Middle - css

Question

I am trying to create a horizontal bar the spreads across the full width of my container. In the middle of the bar, I want a circle that is both horizontally/vertically centered. The circle will overlap the horizontal bar. Right now I can get it so be horizontally aligned but I'm having difficulty vertically centering the bar behind the circle. Here is my code:
#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);
}
And my HTML:
<div id="wrapper">
<div id="navigation">
<div id="navstamp">
</div>
</div>
</div>
Any help would be greatly appreciated!

Answer 1

I'd make use of the css3 ::before pseudo element here, if ancient browser support is not a problem,
<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;
}
as in this JSFiddle

Answer 2

Your first div tag has not been closed if that's your complete html . As in the fiddle your output is as you are explaining.
<div id="wrapper">
<div id="navigation">
<div id="navstamp">
<div id="headlinetext">
<p class="headline">Lorem Ipsum</p>
<p class="subheadline">- Ipsum -</p>
</div>
</div>
</div>
</div>
Fiddle here:
http://jsfiddle.net/b6n2C/

Answer 3

#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);
display:table;
}
#headlinetext{
text-align:center;
vertical-align:middle;
display: table-cell;
}
with the help of display:table; and display:table-cell to child.
it will be aligned using vertical-align:middle;
demo: http://jsfiddle.net/8q4zP/1/