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!
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/
#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;
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.