中间带有虚线文本的虚线分隔符

Question

我试图用中间的文本做一个虚线分隔符，但我无法让文本触及虚线。

ps: 我正在使用 foundation 使 div 响应。

我的HTML代码：

<div class="row">
    <div class="large-5 medium-5 columns sparator">
    </div>
    <div class="large-2 medium-2 columns">
        <center><span class="textSeparator"> Look Of The Day</span></center>
    </div>
    <div class="large-5 medium-5 columns sparator">
    </div>
</div>

CSS 列：

.columns {
    min-height: 20px;
}

CSS 分隔符：

.sparator {
    border: 0;
    border-bottom: 1px dashed #ccc;
}

CSS for textSeparator:

.textSeparator {
    border: dashed 1px #ccc;
    margin-left: auto;
    text-align: center;
    font-size: 15px;
    padding: 5px;
}

最后的结果是：

如您所见，文本框的破折号之间有一些空白 space，我想让它们接触，我该怎么做？我尝试使用 margin-left 和 margin-right 但它们相互抵消了。

Answer 1

只需使用 position: absolute; 将一个元素放在另一个元素的中心，并为容器指定一个 border-bottom。不要忘记为旧浏览器添加 transform 的前缀。

Fiddle for you

<div class="container">
    <span>Some Text Here</span>
</div>

.container {
    margin-top: 20px; /* for display in fiddle */
    position: relative;
    border-bottom: 1px dashed #ccc;
}

.container span {
    background-color: #fff;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%); /* need -webkit- and -moz- also for older browsers */
    border: 1px dashed #ccc;
    padding: 5px;
}

中间带有虚线文本的虚线分隔符

Dashed separator with dashed text in the middle

html

css

zurb-foundation