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

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

textSeparator 的 CSS:

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

最后的结果是:

如您所见，文本所在的框在破折号之间有一些空白，我想让它们接触，我该怎么做？我尝试使用 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;
}