期待一起<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

您可以使用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 2

您可以在您的文件中放置一个<span>示例<h3>，并使其具有与您相同的背景 <h3>，但没有线条，因此<span>有效地与<h3>.

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

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

使其居中。您也可以为其添加宽度和高度。line-height有助于将文本垂直放置在中间。

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