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 的填充。

我已经尝试将文本居中并应用 border-right 和 border-left 但是没有用(而且这不是演示中显示的实际期望结果，我有 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