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属性）。

我几乎肯定必须有一个比应用border-top＆amp; amp;更好的解决方案。底部，没有使用图像，但我找不到它..

更新：这有点接近我试图实现的但不完全，可能我不够清楚。我希望文本位于中心 - 使用您的代码实现的是什么，但我也希望它“推”那些边框，例如左边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

CSS分频器/文本定位

1 个答案: