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

我尝试过将文本居中并应用右边框和左边框，但没有成功（这不会是演示中所示的实际期望结果，我有两行实际上是边框顶部和底部属性）。

我几乎可以肯定，必须有一个比应用边界顶部&底部，没有使用图像，但我找不到它。

更新：这在一定程度上接近我试图实现的目标，但并不完全，可能我不够清楚。我希望文本定位在中间-这是用你的代码实现的，但我也希望它"推"那些边界，比如向左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;
}

这是一个小提琴