希望同时拥有<hr>和<h3>

Question

​

​

就像上面的例子。我已经找到了一些有用的脚本与一个小的img，我确实喜欢，但我不知道如何获得关于标题的填充，所以行不能直接通过。

h3.line {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url(../images/line.jpg);
    background-origin: padding-box;
    background-position: center;
    background-repeat: repeat-x;
    background-size: auto auto;
    display: block;
    margin-bottom: 20px;
}

这说明了这一点。

​

有什么建议或想法吗？

Answer 1

例如，您可以在<h3>中放置一个<span>，并使其具有与您的<h3>相同的背景，但不使用线条，这样<span>就可以有效地与<h3>重叠。

你可以对你的跨度这么说：

span {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

把它放在中心。你也可以给它添加宽度和高度。line-height可帮助您将文本垂直放置在中间。

如果你想节省图像，你可以使用text-decoration: line-through;在文本中画一条线。

Answer 2

你可以有一个1px的点图像，你可以把它作为背景放在H3上。然后在其间有一个span元素，其中有一个背景。

CSS：

h3 {
    background: url(images/dot.png) left center repeat-x;
    padding: 10px;
    text-align: center;
}
h3 span { background: #fff; display: inline-block; padding: 10px 15px; }

HTML：

<h3><span>About</span></h3>

Answer 3

这是一个使用CSS边框属性而不是图像的解决方案。

html：

<h2>
  <span>This is a test</span>
  <div></div>
</h2>

下面是CSS：

h2 {
    text-align:center;
    background-color:#EFEFEF;
    line-height:26px;
    position:relative;
}

span {
    background-color:#EFEFEF;
    padding-right:5px;
    padding-left:5px;
    position:relative;
    z-index:2;
}
h2 > div {
    border-bottom:1px solid grey;
    position:relative;
    z-index:1;
    top:-13px; /* half the line-height of the containing element */
}

A fiddle Demonstration

<div>被放置在标题元素内部，并通过将其顶部位置设置为标题元素高度的一半(即标题行高)来定位到一半的位置。z-index在span和div上使用，以便span获得比div更高的堆栈顺序，并遮挡有重叠的(边框)线。