CSS 分隔符/文本定位

Question

我在使用 CSS 分隔符时遇到了一些困境。看看:http://jsfiddle.net/fVxC6/1/

.div-line {
    border-bottom: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    width: 100%;
    float: left;
    height: 1px;
    display: inline-block;
    margin: -14px 0 25px 0;
}

我想要实现的是将文本放在中间，并应用 5px 的填充。

我尝试过将文本居中并应用右边框和左边框，但这不起作用(并且这不是演示中所示的实际所需结果，我有 2 行实际上是border-top 和 border-bottom 属性)。

我几乎确信必须有一个比应用边框顶部和底部并且不使用图像更好的解决方案，但我找不到它..

更新:这有点接近我试图实现的目标，但不完全是，可能我还不够清楚。我希望文本位于中心 - 通过您的代码实现的效果，但我也希望它“插入”这些边框，例如向左 5 像素，向右 5 像素，因此它们之间会创建一个间隙，其中实际居中文本的位置

Answer 1

我采取了与您不同的路线，因为根据我的推理，您必须将所有元素视为文本，从而内联显示它们。

.div {
    width:960px;
    text-align:center;
}

.divider {
    font-size: 16px;
    font-weight: 400;
    background-color: #fff;
    padding-right: 10px;
        display: inline-block;
    width:10%;
    padding: 0 3px;
    vertical-align: middle;
}

.div-line {
    border-bottom: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    width: 40%;
    height: 1px;
    display: inline-block;
    vertical-align: middle;
}

这是一个fiddle