1

我已经制作了一些我需要的标题。

CSS：

body {
    background:url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/tiny_grid.png");
}

.main-container {
    width: 600px;
    margin: 0 auto;
    box-shadow:0 0 5px #d00;
}

.headline {
    display: inline-block;
    margin: 40px 0;
    padding: 0 30px;
    font: normal 33px/1.1 Georgia, "Times New Roman", Times, serif;
    color: #3E3E3E;
    height: 1px;
    border-left: 300px solid #aaa;
    border-right: 300px solid #aaa;
    white-space: nowrap;
}

.headline > span {
    display:block;
    margin-top:-17px;
}

HTML：

<div class="main-container">
    <h1 class="headline"><span>OUR LATEST WORKS</span></h1>
</div>

这不是完整的解决方案，因为我使用文本周围的边框将文本从父容器中推出。

还有其他方法吗？但没有额外的 div 和 JS。

PS：背景图可能不一样，所以我已经尝试在文字下放同一个bg，但这不是解决办法。

PPS：“div.main-container”不得包含溢出：隐藏

4

7 回答 7

3

我想出了类似http://jsfiddle.net/olgis/qkNfm/的东西，类似于@GionaF 解决方案，只是没有固定宽度，但您仍然需要一个容器来在文本下方显示红线。

据我了解，您的解决方案标准是：

  • 任何背景
  • 没有 JavaScript 或 jQuery
  • css 液体布局（无固定宽度）
  • 最小的 HTML
  • 跨浏览器解决方案

在这篇文章http://www.impressivewebs.com/centered-heading-horizo ​​ntal-line /中，他们正在讨论“使用 CSS 覆盖水平线的居中标题”许多不同的解决方案以及跨平台问题。

我的猜测是你的目标是像这样http://result.dabblet.com/gist/1560674 一个只有一个 H1 的简洁解决方案。

于 2012-10-02T12:41:29.297 回答
2

没有在 h1 的文本上设置背景很难，所以这是一个棘手的解决方法。

检查这个演示

HTML：

<div class="main-container">
    <h1 class="headline">
        <span>&nbsp;</span>
        <span>OUR LATEST WORKS</span>
        <span>&nbsp;</span>
    </h1>
</div>

CSS：

.main-container {
    width: 600px;
    margin: 0 auto;
    box-shadow:0 0 5px #d00;
}
.headline {
    font: normal 33px Georgia, "Times New Roman", Times, serif; /* no line-height here */
    color: #3E3E3E;
    display:table;
    text-align:center;
}
.headline > span {
    display:table-cell;
}
.headline > span:nth-child(2) {
    width:50%;
    padding:0 0.2em;
    white-space:nowrap;
    line-height:1.2em;
}
.headline > span:nth-child(1), .headline > span:nth-child(3) {
    border-top:1px solid #CCC;
    width:25%;
    position:relative;
    top:0.6em;
}

​</p>

于 2012-10-02T09:17:53.623 回答
1

……………………………………………………………………………………………………………………

您好现在查看这个演示 http://jsfiddle.net/zxzLT/22/

添加这个CSS

.headline {
    display:block;
    margin: 40px 0;
    padding:30px;
    font: normal 33px/1.1 Georgia, "Times New Roman", Times, serif;
    color: #3E3E3E;
text-align:center;
    white-space: nowrap;
    position:relative;
}
.headline:after{
content:'';
    position:absolute;
    border-top: 1px solid #aaa;
    left:0;
    right:0;
    height:1px;
    z-index:-1;
    top:50%;
}

.headline > span {
    display:inline-block;
    background:url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/tiny_grid.png");
    padding:0 30px;
}

现场演示

于 2012-10-02T09:20:54.773 回答
1

一个只有一个元素h1（没有span内部，没有div包装）和没有透明背景的 js（纯 css）的解决方案：

http://puigcerber.wordpress.com/2013/03/08/centered-heading-overlaying-a-horizo​​ntal-line-with-css/

在行动中看到它：http: //jsfiddle.net/vLwDf/970/

于 2013-09-24T15:24:01.060 回答
0

如果你需要的话，你可以使用右边界和左边界。有关其工作原理的更多详细信息，请参阅链接http://www.quackit.com/css/properties/css_border-right-style.cfm。

编辑您可以将边框放在 h1 元素上，而不是放在 h1 的容器中

于 2012-10-02T09:13:21.520 回答
0

如果您要实现的目标是让包含的 div 将 h1 保持在其范围内，您应该尝试以下操作：

.main-container {
    box-shadow: 0 0 5px #DD0000;
    display: table-row; /* i added this line */
    margin: 0 auto;
    width: 600px;
}

或将 .main-container 的宽度增加到 1000 像素。

于 2012-10-02T09:25:39.077 回答
0 
.main-container {
    width: 600px;
    height: 80px;
    margin: 0px auto;
    box-shadow: 0px 0px 5px #d00;
}

.headline {
    display: inline-block;    
    margin: 20px 0px 0px 0px;
    font: normal 33px/1.1 Georgia, "Times New Roman", Times, serif;
    color: #3E3E3E;
    white-space: nowrap;
}

.headline span {
    margin: 0px -40px 0px 0px;
    display:inline-block;
    position: relative;
    left: 50%;
    text-align:center;
}
于 2012-10-02T10:06:40.903 回答