css上下有字中间有线怎么写

在网页中，有时我们需要在两个文字之间加一条水平线，比如分割线、下划线等，这样可以更好地区分内容。下面就来介绍一下如何使用 CSS 实现上下有字中间有线的效果。

 .line {
    border-top: 1px solid #ccc;
    text-align: center;
    line-height: 0.1em;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .line span {
    background-color: #fff;
    padding: 0 10px;
  } 

首先，我们可以使用 border-top 属性来制作一条水平线，其语法为 border-top: border-width border-style border-color。我们可以将 border-style 设为 solid，border-width 设为 1px，border-color 设为我们想要的颜色（例如 #ccc）来制作一条 1px 粗的水平线。

但是这时我们会发现，文字和水平线之间有一定的距离，显得有些不协调。那么我们需要调整一下 line-height 属性和 margin 属性。将 line-height 设为一个较小的值，比如 0.1em，就可以将文字和水平线的距离调整得更近一些了。同时，margin-top 和 margin-bottom 属性也要进行一定的调整，来保持整个效果的美观。

但是如果我们直接在标签中添加样式，就会显得过于繁琐，代码也不够清晰。因此，我们可以使用 span 标签将文字包裹起来，并单独为 span 标签添加样式。

上述的 CSS 代码实现了在两段文字之间加一条水平线的效果，使用时只需要在 HTML 中添加如下代码即可：

 <p>
    <span>上面的文字</span>
    <span class="line"><span>分割线</span></span>
    <span>下面的文字</span>
  </p> 

这样就可以得到一段优秀的代码，实现上下有字中间有线的效果了。