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

如果那是你的完整HTML，你的第一个div标签还没有关闭。正如你在解释的那样，你的输出正如你所解释的那样。

<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>

这里小提琴： http://jsfiddle.net/b6n2C/

Answer 2

#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;
}

在display:table;和display:table-cell的帮助下给孩子。它将使用vertical-align:middle;

进行对齐

演示： http://jsfiddle.net/8q4zP/1/

Answer 3

如果古老的浏览器支持不是问题，我会在这里使用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

中间有圆的单杠

3 个答案: