带有居中文本的虚线

Question

我在一条虚线后面，中间有一个标签。虚线需要适合屏幕的宽度。我想到了以下几点。

<fieldset class="dashed">
<legend align="center">Some Centred Text</legend>
</fieldset>

.dashed
{
border:0px;
border-top: 1px dashed;
}   

想知道是否有更好的方法。

Answer 1

如果我是你，我会使用div和span作为我的标记：

<div class="dashed">
    <span>Some Centred Text</span>
</div>

在CSS中：

.dashed {
    border-bottom: 1px dashed #000;
    text-align: center;
    height: 10px;
    margin-bottom: 10px;
}

.dashed span {
    background: #fff;
    padding: 0 5px;
}

代码段：

.dashed {
  border-bottom: 1px dashed #000;
  text-align: center;
  height: 10px;
  margin-bottom: 10px;
}

.dashed span {
  background: #fff;
  padding: 0 5px;
}

<div class="dashed">
  <span>Some Centred Text</span>
</div>

• 检查jsFiddle Demo。