html - CSS: margin 自动和绝对位置

Question

我正在尝试创建一个“按钮”，其中包含 2 个部分(每个部分是 div 高度的 50%)，由水平条分隔。每个部分都有居中的文本。按钮的大小将使用 javascript 进行操作，我试图避免也使用 javascript 将元素定位在“按钮”内。

我目前拥有的是 http://jsfiddle.net/u5u7d31p/2/ ，但我在将单杠居中时遇到问题。如果我将分隔符的位置更改为相对位置，则条形图居中，但随后它会更改文本底部的位置。我也可以将边距更改为静态值 (margin: 0 63px;) 以使其居中，但如果有不需要 javascript 的更简单的解决方案，我想避免它。

.img_overlay .separator{
    position: absolute;
    top: -1px;
    left: 0;
    height: 3px;
    width: 70px;
    margin: 0 auto;
    background: #444;
}

有什么想法吗？谢谢。

Answer 1

所有代码都可以。只需将此 css 放在 .img_overlay .separator 类下面即可。

完整代码如下:

.img_overlay .separator {
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
right: 0;
}

在 jsfiddle 上查看我的演示