14

デフォルトの凡例テキストがフィールドセットに表示される方法と同様の見出しテキストのスタイルを設定しようとしています。つまり、取り消し線のような行をテキストまでではなくテキストまで引きたいのです。どうすればこれを達成できるかについての情報が見つからないようです。他の多くの質問について、Google は常にスタック オーバーフローに回答を求めていたので、ここの誰かがアドバイスをくれるかもしれないと思いました。

より明確にするために。ヘッダーテキストでこの効果を得ようとしています:

                              中央揃えのヘッダー テキスト                              

これを行う方法はありますか？

4

9 に答える 9

15

参照: http://jsfiddle.net/thirtydot/jm4VQ/

テキストを折り返す必要がある場合、これは機能しません。IE7 では行はありません。

HTML:

<h2><span>Centered Header Text</span></h2>

CSS:

h2 {
    text-align: center;
    display: table;
    width: 100%;
}
h2 > span, h2:before, h2:after {
    display: table-cell;
}
h2:before, h2:after {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    width: 50%;
    content: ' ';
}
h2 > span {
    white-space: nowrap;
    padding: 0 9px;
}
于 2011-05-12T23:28:43.700 に答える
2

編集：

<h2><strike>&nbsp;&nbsp;&nbsp;&nbsp;</strike>Your Text Here<strike>&nbsp;&nbsp;&nbsp;&nbsp;</strike></h2>

いくつかの単純なタグと改行なしのスペースを使用してそれを行う方法を次に示します。

私は画像を使用してそれを1日と呼びますが、これは私にとってはうまくいくようでした:

CSS

  fieldset {
    border-right: 0px;
    border-left: 0px;
    border-bottom: 0px;
    width: 200px;
  }
  legend {
    margin: 0 25%;
  }

HTML

<fieldset>
  <legend>My Text Here</legend>
</fieldset>

それがcssでそれを行う方法を理解できる唯一の方法です。幅が固定されていることに注意してください。繰り返しますが、私は自分でこれをしません。

CSS 猫は承認しない

于 2011-05-12T22:20:27.530 に答える
2
于 2012-02-13T16:36:24.707 に答える
1

flexbox は最新のすべてのブラウザーでサポートされており、著者が IE8 の要件について言及してから 5 年が経過したため、それを使用して新しいソリューションを構築する楽しみを持ちたいと思いました。

より複雑になるさまざまな例:

https://jsfiddle.net/0mL79b4h/1/

https://jsfiddle.net/0mL79b4h/2/

CSS

div {
  display: flex;
  align-items: center;
}

div:before,
div:after {
  border: 1px solid #000000;
  border-radius: 2px;
  height: 2px;

  display: block;

  content: "";
  flex: 1;

  width: 100%;
}

h1 {
  text-align: center;

  margin: 8px;
}

HTML

<div>
  <h1>Example Text</h1>
</div>

<div>
  <h1>Multi-Line<br>Example Text</h1>
</div>

長所：

  • フレックスボックスを採用！
  • 超シンプルな HTML。
  • 左右のアシンメトリー調整が可能です。
  • 背景の問題なし、色の継承なしなど。
  • 流体幅。
  • 複数行のサポート。
  • 左/中央/右/カスタム配置: 前後の要素の flex プロパティを個別に調整するだけです。数値が大きいほど、その側により多くのスペースが割り当てられます。1 つを完全に削除して、左または右に揃えます。
  • ボーダー スタイルをいじることによる興味深い効果 (この例では、実際に丸いボーダーを選択しました)。高さを 0px に設定し、一般的な線の代わりに border-top を使用します。

短所：

  • フレックスボックスを使用。怠け者と呼んでください。この例では下位互換性を構築していないため、疑似要素をサポートしているがフレックスボックスをサポートしていないブラウザーでは奇妙に見えますが、最後に確認したのは Chrome (Firefox など) でしたが、とにかくすべて自動的に更新されます。Modernizr を使用したい場合があります。
于 2016-11-08T12:50:46.133 に答える
1

クライアントのサイトで私が使用しているものは次のとおりです: http://jsfiddle.net/TPgE4/

長所：

  • 画像は不要 - 即座にレンダリング
  • パディングを使用して、テキストの両側のスペースを制御します
  • テキストは中央揃え、または左/右揃えにすることができます — たとえば、 margin-left: 8pxまたはスタイル定義margin-right: 8pxに追加するだけh2 spanで見栄えが良くなります

短所：

  • <span>...</span>見出しタグの内側など、追加のタグを使用する必要があります
  • 見栄えを良くするために、テキストは 1 行に収める必要があります
  • 要素の背景色<span>は周囲の背景色と一致する必要があるため、無地の背景画像、グラデーション、またはパターンがある場合、完全には一致しません。
于 2012-03-14T20:38:31.233 に答える
0 
body { padding-top: 100px; }

div.parent {
    text-align: center;
    border-top: 1px solid #ccc;
}

div.parent div {
    display: inline-block;
    margin-top: -0.8em;
    padding: 0 0.5em;
    background: #fff;
}

<body>
    <div class="parent">
        <div>My Text Here</div>
    </div>
</body>

これは、設計に一致する可変幅のソリューションであり、IE7 で問題ないはずです (ただし、確認していないことは認めます)。いくつかの欠点があります。

  • フィールドセット/凡例のセマンティクスが失われます。
  • テキストに透明な背景を配置することはできません。

流体幅にする必要がない場合は、onteria_ のソリューションがおそらく最善の策です。

于 2011-05-13T00:08:06.050 に答える
0

これはあまり良い答えのようには思えませんが、とにかく投稿しています。

参照: http://jsfiddle.net/rFmQg/

<h2><span>Centered Header Text</span></h2>

h2 {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    text-align: center
}
h2 span {
    background: #fff;
    padding: 0 9px
}

私はそれが好きではありません:

  • 画像を使用する必要があります。
  • これ。 （背景が一致している場合にのみ機能します）
于 2011-05-12T22:20:46.860 に答える
0

これがあなたのニーズに合うかどうかはわかりません...

h1:before, h1:after {
 content: " ------------- ";
}
于 2011-05-12T22:07:14.460 に答える