css - 带有居中文本的虚线

Question

我在中间有一个标签的虚线之后。虚线需要适合屏幕的宽度。我想出了以下内容。

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

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

想知道有没有更好的方法。

Answer 1

如果我是你，我使用divandspan作为我的标记：

<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 演示。