Horizontal Bar with Circle in Middle

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/