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: 背景画像が異なる可能性があるため、既にテキストの下に同じ背景を配置しようとしていますが、解決策ではありません。

PPS: "div.main-container" には、overflow:hidden を含めてはなりません

4

7 に答える 7

3

私はこのhttp://jsfiddle.net/olgis/qkNfm/のようなものを思いつきました.固定幅のない @GionaF ソリューションに似ていますが、テキストの下に赤い線を引くにはコンテナが必要です.

私が理解しているように、解決策の基準は次のとおりです。

  • 任意の背景
  • JavaScript または jQuery なし
  • css Liquid レイアウト (固定幅なし)
  • 最小限の HTML
  • クロスブラウザ ソリューション

この投稿http://www.impressivewebs.com/centered-heading-horizo ​​ntal-line/ では、「CSS で水平線をオーバーレイする中央見出し」について、さまざまなソリューションとクロスプラットフォームの問題について議論しています。

私の推測では、このhttp://result.dabblet.com/gist/1560674 H1 が 1 つだけのきちんとしたソリューションのようなものを目指していると思います。

于 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

透明な背景を持つ 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 
.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 に答える
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 の幅を 1000px などに増やします。

于 2012-10-02T09:25:39.077 に答える
0

それが必要な場合は、border-right と left を使用できます。この仕組みの詳細については、リンクhttp://www.quackit.com/css/properties/css_border-right-style.cfmを参照してください。

EDITそのh1のコンテナではなく、h1要素に境界線を置くことができます

于 2012-10-02T09:13:21.520 に答える