虚线文本在中间的虚线分隔符

Question

我试图在中间做一个带有文字的虚线分隔符，但是我无法让文字接触到粗糙的线条。

ps：我正在使用粉底来使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

只需使用PropertiesToView[0]['SelectedValues'] = PropertiesToView[0]["LandAreaselectedValues"]; delete PropertiesToView[0]["LandAreaselectedValues"]; 将元素放在另一个元素的中心，然后为容器指定边框底部。不要忘记为其他浏览器添加position: absolute;的前缀。

Fiddle for you

transform