Question

我想创建一个以div为中心的标题，左边和右边有两个跨度。我设法做到了，但有两个问题，我似乎无法想到解决方案。

第一个涉及垂直居中两个边界跨度中间跨度'标题'。
第二个是左边框全部扩展到div的左边缘，反之亦然右边（显然，跨距的宽度需要从原始边缘更改）。

使用两个小时似乎是一个好主意，但它可能涉及太多的黑客攻击做这么简单的事情。

HTML

<div id="container">
    <div class="title">
        <span class="border"></span>
        <span>Title</span>
        <span class="border"></span>
    </div>
</div>

CSS

#container {background: #eee; height: 100px; width: 100%;}
.title {margin: 0 auto; text-align: center; margin-top: 20px;}
.title span:nth-child(2) {padding: 0 10px;}
.border {display: inline-block; width: 40px; background: #000; height: 1px;}

Answer 1

我假设你想要一个单词之前和之后的行，而不是为什么不使用伪元素？您将需要单个元素，没有span而没有其他元素来实现这种效果。

Demo

我从头开始创建了以下示例，在这里，使用:before和:after伪来创建虚拟元素，然后使用设置为position: absolute;的{{1}}相应地定位它们top: 50;用于垂直居中，然后扣除每个伪元素的width，使其不与您的单词重叠。

div {
   margin: 150px;
   position: relative;
   float: left;
}

div:before,
div:after {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    height: 1px;
    background: #f00;
}

div:before {
    left: -50px;
}

div:after {
    right: -50px;
}

正如您所评论的，如果您希望线条从边缘到边缘完全展开..而不是将文本包裹在span中并在CSS中进行如下所示的更改

Demo 2 （扩展100％）

<div><span>Hello</span></div>

div {
   text-align: center;
   position: relative;
}

div span {
    background: white;
    position: relative;
    z-index: 1;
}

div:before {
    content: "";
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    height: 1px;
    background: #f00;
    z-index: 0;
}

使用Spans创建水平标题栏

1 个答案: