2

我在这里遇到了一个 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 行实际上是边框顶部和边框底部属性）。

我几乎可以肯定，必须有比应用边框顶部和底部而不使用图像更好的解决方案，但我找不到它..

更新：这有点接近我试图实现的目标，但不完全是，可能我不够清楚。我希望将文本定位在中心 - 使用您的代码实现什么，但我也希望它“推动”这些边界，例如向左 5 个像素和向右 5 个像素，因此它们之间会在哪里创建一个间隙实际居中的文本被定位

4

1 回答 1

4

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

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

这是一个小提琴

于 2013-07-04T09:57:17.877 回答