<hr />のような行の中央に中央揃えのテキストを追加します


217

次のようにテキストの両側に線を作成するために厳密なxhtml 1.0のオプションにはどのようなものがあるのでしょうか。

セクション1
-----------------------次のセクション-----------------------
セクション2

私はこのようないくつかの空想的なことをすることを考えました:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

または、上記の配置に問題があるため(垂直および水平の両方):

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

これには整列の問題もありますが、これをこの混乱で解決します。

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

アラインメントの問題に加えて、どちらのオプションも「曖昧」に感じられます。これを以前に見たことがあり、エレガントなソリューションを知っていたら、私は多くの義務を負います。


3
タグなしのチャレンジが追加された別のスレッドと解決策を次に示します。stackoverflow.com/questions/12648513/...
willoller

1
stackoverflow.com/questions/5214127/…は依然として最良のソリューションです。

ここで役立つ答えは、CSSグリッドを使用することです。
ブライアンM.ハント

ほとんどすべての要素を背景を設定せずに仕切りに変換し、設定を可能にする回答(SCSS)を追加しました。仕切りの色とストロークスタイル(実線、点線、破線)、テキストの位置(左、右、中央)、およびこれを適用するクラス(デフォルトでは.divider)。
tao

与えられた現在のフレキシボックスのサポートは、私が思うに、私の答えは、いくつかの可視性を取得する可能性があります。
MatTheCat

回答:


63

これが理解されたかどうかはわかりませんが、フレックスボックスはかなりの解決策を提供します:

<div class="separator">Next section</div>

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}

デモについては、http://jsfiddle.net/MatTheCat/Laut6zyc/を参照してください。

今日の互換性はそれほど悪くなく(古いflexbox構文のすべてを追加できます)、それは優雅に低下します。


最近のflexboxサポートを考慮した最良の回答
akivajgordon 2018年

これは素晴らしいソリューションです
Smaillns

217

どうですか:

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;">
    Section Title <!--Padding is optional-->
  </span>
</div>

このJSFiddleをチェックしてください

vwまたは%を使用して応答可能にすることができます


2
正確な最高値を取得することは少し難しいです。正確には-0.5emではありません。
Mitar

完璧。「レスポンシブ」
JimXC 2013年

4
背景色や幅を指定する必要のない解決策については、私の回答を参照してください。
MartinF 14

レスポンシブで透明なbg、可変スタイルとディバイダーの高さ、テキストの可変位置については、私の回答を参照しください。SCSSを使用して、同じプロジェクトに複数のスタイルのディバイダーを持たせるために、異なるセレクターに複数回適用することもできます。で動作しますfont-size
tao

193

幅と背景色を知らずにこれを解決する方法は次のとおりです。

構造

<div class="strike">
   <span>Kringle</span>
</div>

CSS

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: red;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}

例:http : //jsfiddle.net/z8Hnz/

二重線

二重線を作成するには、次のいずれかのオプションを使用します。

1)行間の固定スペース

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    border-top: 4px double red;

例:http : //jsfiddle.net/z8Hnz/103/

2)行間のカスタムスペース

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 5px; /* space between lines */
    margin-top: -2px; /* adjust vertical align */
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

例:http : //jsfiddle.net/z8Hnz/105/


SASS(SCSS)バージョン

このソリューションに基づいて、誰かに役立つ可能性がある場合は、「カラープロパティ付き」のSCSSを追加しました...

//mixins.scss
@mixin bg-strike($color) {

    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 

    > span {

        position: relative;
        display: inline-block;

        &:before,
        &:after {
            content: "";
            position: absolute;
            top: 50%;
            width: 9999px;
            height: 1px;
            background: $color;
        }

        &:before {
            right: 100%;
            margin-right: 15px;
        }

        &:after {
            left: 100%;
            margin-left: 15px;
        }
    }
}

使用例:

//content.scss
h2 {
    @include bg-strike($col1);
    color: $col1;
}

このバージョンは、ラインに画像を使用している場合、または少なくとも編集して応答性を維持する方が簡単な場合に、より適切に機能します
tehlivi

とてもいい仕事です!魔法使いを使用して二重線を作成できますか?(それ以外の場合は、小さな繰り返しの背景画像を使用することにします。)
wloescher

3
素晴らしいスニペット!ありがとう:)
plong0

2
これは、背景を設定しなくても機能し、透明な背景を設定する必要がある場合に最適な答えです
Dinesh Dabhi

1
最初の例は単に素晴らしいです!おめでとうございます!正解です!
Luiz Eduardo

87

これは、コンテナの幅や背景色を知らなくても:: beforeおよび:: afterを使用して実現でき、改行のスタイルをより適切に設定できます。たとえば、これを変更して二重線、点線などを作成できます。

JSFiddle

CSS、およびHTMLの使用:

.hr-sect {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	color: rgba(0, 0, 0, 0.35);
	margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
	content: "";
	flex-grow: 1;
	background: rgba(0, 0, 0, 0.35);
	height: 1px;
	font-size: 0px;
	line-height: 0px;
	margin: 0px 8px;
}
<div class="hr-sect">CATEGORY</div>

SCSSバージョン:

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0;

    &:before, &:after {
        content: "";
        flex-grow: 1;
        background: rgba(0, 0, 0, 0.35);
        height: 1px;
        font-size: 0;
        line-height: 0;
        margin: 0 8px;
    }
}

1
エレガントなソリューションですが、1つの注意点があります。テキストがない場合でも、行と行の間にギャップがあります。
2016

13
正直に言うと、これはこのスレッドで最もクリーンなソリューションです。常にテキスト付きの仕切りが必要になるため、テキストなしの問題は見落とされる可能性があります。
ロバート

51

これを試して:

.divider {
	width:500px;
	text-align:center;
}

.divider hr {
	margin-left:auto;
	margin-right:auto;
	width:40%;

}

.left {
	float:left;
}

.right {
	float:right;
}
<div class="divider">
    <hr class="left"/>TEXT<hr class="right" />
</div>

jsFiddleのライブプレビュー。


4
それは完全に機能し、<hr />を使用するので、この回答で何が問題になる可能性がありますか?私は何も言いません。
カービー

4
+1背景色をいじったり、意図しない方法でタグを使用したりする必要はありません。1つの欠点は、.divider hr幅がテキストの長さに依存することです。提案:.divider.divider hr幅がで指定されなければならないem単位。hr幅を取得するには、(.dividerwidth-#of chars)/ 2を使用します。
ケルビン

12
それは最善の解決策ではありません。テキストの幅が不確かな場合はどうでしょうか。テキストが長くなると、すべてが台無しになります。
IwonaTrąbka14年

これが最良かつ最も簡単な答えです
ha9u63ar

1
ここでは40%が間違っています。テキストが長いと、ずれてしまいます
TomSawyer

21

私はちょうど同じ問題に遭遇しました、ここにそれを解決する1つの方法があります:

<table width="100%">
  <tr>
    <td><hr /></td>
    <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
    <td><hr /></td>
  </tr>
</table>

テキスト要素に背景を設定しなくても機能します。つまり、背後にある背景に関係なく見栄えがします。

ここで試すことができます:http : //jsfiddle.net/88vgS/


OPの問題を解決しません。これにより、間にテキストを含む2つの行が作成されます。彼は途中で途切れており、途切れた部分にテキストがある行を望んでおり、その行は続きます。
Dracorat 2013年

2
実際には、OPが求めていることを実行します。jsfiddle.net/88vgSで
Robert Kajic 2013年

また、間にテキストが入った2行ではないにしても、壊れたセクションにテキストがある、途中で切れたラインとは何ですか?
Robert Kajic 2013年

そこに適切なTRタグをスローする必要があります。それが私を一瞬混乱させたと思います。私はもともと何らかの理由で3列ではなく3行にあると思っていました。正しいマークアップがおそらく私にそれをそのように見させなかったでしょう。とにかく、それは間違いなく実行可能なソリューションです。
Dracorat 2013年

1
しかし、これはテーブルを使用します、それは許可されていません!ああ、冗談です。GRIDはその場所にあり、他のほとんどすべてのGUI XMLフレームワークはそれを認識し、どこでも使用します(たとえば、WPF / XAML)。ソリューションメイトをありがとう!これは3票以上の投票に値します。嫌われているテーブルへの人々の嫌悪は、しかし、障害になると思います。
ニコラスピーターセン

10

更新:これはHTML5を使用すると機能しません

代わりに、この質問で他のテクニックを確認してください。CSSチャレンジ。HTMLを追加せずにこれを実行できますか?


line-height:0は私のサイトguerilla-alumnus.comのヘッダーに効果を作成するために使用しました

<div class="description">
   <span>Text</span>
</div>

.description {
   border-top:1px dotted #AAAAAA;
}

.description span {
   background:white none repeat scroll 0 0;
   line-height:0;
   padding:0.1em 1.5em;
   position:relative;
}

別の良い方法はオンです http://robots.thoughtbot.com/にあります

彼は背景画像を使用して、クールな効果を達成するために浮きます


1
私はこれが好きです、あなたのサイトでは見栄えはいいのですが、動作させることができませんでした(jQuery cssによる干渉が疑われます)。しかし、それは本当にクールです:(。
ブライアン・M・ハント

私はあなたのh1がスパンを押し下げていると思います。
imns

1
これは、DOCTYPE XTHML 1.0 Transitionalのさまざまなレンダリング動作を採用した「ハック」です。DOCTYPE html(HTML5の場合)を使用すると、機能しません。
Peter

6
<div style="text-align: center; border-top: 1px solid black">
  <div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>

6

CSSを使用でき、廃止されたalign属性を使用する場合は、スタイル付きフィールドセット/凡例が機能します。

<style type="text/css">
fieldset { 
    border-width: 1px 0 0 0;
}
</style>

<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>

<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>

フィールドセットの目的は、フォームフィールドを論理的にグループ化することです。willolerが指摘したように、のtext-align: centerスタイルはlegend要素には機能しません。 align="center"は非推奨のHTMLですが、すべてのブラウザでテキストを適切に中央に配置する必要があります。


私が何をしていたのかについてのより詳細な説明。
dclowd9901 2010年

私はかなり確信している<legend>の表示特性を取るblockか、inline-blockそれがパディングされるように、要素その手段、マージンtext-align:centerべきでない仕事...
dclowd9901

ええ、伝説はセマンティクスに最適です-ラジオグループをラップするために使用しますが、悪名高いほど頑固です
willoller

答えを直した。残念ながら、legend要素のスタイリングにおける特定のブラウザーの頑固さのために、align="center"は確実にを中央に配置できる唯一の解決策legendです。
Trey Hunner、2010年

6

ブートストラップグリッド:

HTML:

  <div class="row vertical-center">
    <div class="col-xs-5"><hr></div>
    <div class="col-xs-2" style="color: white"> Text</div>
    <div class="col-xs-5"><hr></div>
  </div>

CSS:

.vertical-center{
  display: flex;
  align-items: center;
}

1
このvertical-centerクラスは、ブートストラップ(4.3.1)には存在しません。答えを更新して言ってもらえますalign-items-centerか?
キャメロンハドソン

5

相対位置を使用して、親に高さを設定することができます

.fake-legend {
  height: 15px;
  width:100%;
  border-bottom: solid 2px #000;
  text-align: center;
  margin: 2em 0;
}
.fake-legend span {
  background: #fff;
  position: relative;
  top: 0;
  padding: 0 20px;
  line-height:30px;
}
<p class="fake-legend"><span>Or</span>
</p>


5

CSSのみの単純なソリューションがあり、バックグラウンドトリックはありません...

.center-separator {
    display: flex;
  line-height: 1em;
  color: gray;
}

.center-separator::before, .center-separator::after {
    content: '';
    display: inline-block;
    flex-grow: 1;
    margin-top: 0.5em;
    background: gray;
    height: 1px;
    margin-right: 10px;
    margin-left: 10px;
  }

HTML:

  <div class="center-separator">
    centered text
  </div>

フィドルの例:https : //jsfiddle.net/0Lkj6wd3/


ユーティリティクラスのような、優れた再利用可能なソリューション。
Vignesh

3
<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

邪悪なハック...


1
私はこれをハックとは呼びませんが、サポートする予定のすべてのブラウザーで機能することをテストします。
Nick Larsen

フィールドセットは、そのように使用されることを望んでいない、それが;-)場所にハッキングされています
ダヌ

3

2年前の投稿を急上昇させましたが、1つの要素とCSSのみを使用してこれらの状況に対処する方法を次に示します。

​h1 {
    text-align: center;
}

h1:before,
h1:after {
    content: "";
    background: url('http://heritageonfifth.com/images/seperator.png') left center repeat-x;
    width: 15%;
    height: 30px;
    display: inline-block;
    margin: 0 15px 0 0;
}

h1:after{
    background-position: right center;
    margin: 0 0 0 15px;
}

そして、それを確認するためのフィドルがあります:http : //jsfiddle.net/sRhBc/(国境のために撮影されたGoogleからのランダムな画像)。

このアプローチの唯一の欠点は、IE7をサポートしないことです。


3

使うだけ

    hr
    {
        padding: 0;
        border: none;
        border-top: 1px solid #CCC;
        color: #333;
        text-align: center;
        font-size: 12px;
        vertical-align:middle;
    }
    hr:after
    {
        content: "Or";
        display: inline-block;
        position: relative;
        top: -0.7em;
        font-size: 1.2em;
        padding: 0 0.25em;
        background: white;
    }

2

これは1歳ですが、私の最初の投稿をWoohooします。ラッパーでの背景色の問題を回避するために、インラインブロックをhrで使用できます(誰も明示的に言っていません)。インライン要素であるため、text-alignは正しく中央に配置されます。

<div style="text-align:center">
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
       &nbsp;New Section&nbsp;
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>

2

h1真ん中にスパンのあるを使用しています。

HTMLの例:

<h1><span>Test archief</span></h1>

CSSの例:

.archive h1 {border-top:3px dotted #AAAAAA;}
.archive h1 span { display:block; background:#fff; width:200px; margin:-23px auto; text-align:center }

そのような単純な。


Youri、StackOverflowへようこそ。の代わりに、のspan使用を検討できますdiv。本来ブロック要素であることを除いて、同じ目的を果たします。:)
Nix

インライン要素内の@Nixブロック要素?いいえ、スパンは良い選択です
ジョナサンアズレイ2013年

1
@MrAzulay h1はインライン要素です。spanラッピングには便利ですが、divこの場合にa を使用する理由は、YouriがCSSを使用してをに設定しているspanためdisplay:block;です。divすぐに利用できる適切なブロック要素()がある場合、インライン要素をブロック要素にする意味がわかりません。
Nix

@ニックスそれはかなり一般的なことではないですか?インライン内にブロックを配置するのは悪い習慣です。これは、それについての良い記事ですskypoetsworld.blogspot.se/2008/10/...
ジョナサン・アズーレイ

おっと、私は私の最新のコメントを間違って入力しました。インライン要素内にブロックを配置するべきではないことに同意しますh1が、実際にはBLOCK要素です。混乱させて申し訳ありません。それでも、spanaをブロック要素にする意味はわかりませんが、十分に公平です。
Nix 2013年

2

上記を見て、私は次のように変更しました:

CSS

.divider {
    font: 33px sans-serif;
    margin-top: 30px;
    text-align:center;
    text-transform: uppercase;
}
.divider span {
    position:relative;
}
.divider span:before, .divider span:after {
    border-top: 2px solid #000;
    content:"";
    position: absolute;
    top: 15px;
    right: 10em;
    bottom: 0;
    width: 80%;
}
.divider span:after {
    position: absolute;
    top: 15px;
    left:10em;
    right:0;
    bottom: 0;
}

HTML

<div class="divider">
    <span>This is your title</span></div>

正常に動作するようです。


2

@kajicのソリューションを採用し、CSSにスタイルを設定します。

<table class="tablehr">
  <td><hr /></td>
  <td>Text!</td>
  <td><hr /></td>
</table>

次に、CSS(ただし、n番目のセレクターの使用はCSS3に依存します):

.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }

乾杯。

(PS tbodyとtrでは、Chrome、IE、Firefoxは少なくとも自動的にtbodyとtrを挿入します。これが、@ kajicのような私のサンプルにこれらが含まれていないため、必要なhtmlマークアップを短くするためです。このソリューション2013年現在、最新バージョンのIE、Chrome、Firefoxでテストされています)。


2

デモページ

HTML

<header>
  <h1 contenteditable>Write something</h1>
</header>

CSS

header{ 
  display:table;
  text-align:center; 
}
header:before, header:after{ 
  content:'';
  display:table-cell; 
  background:#000; 
  width:50%;
  -webkit-transform:scaleY(0.3);
  transform:scaleY(0.3);
}
header > h1{ white-space:pre; padding:0 15px; }

2

これは私にとってはうまくいき、境界線を隠すためにテキストの背景色を必要とせず、代わりに実際のhrタグを使用します。幅をいじって、さまざまなサイズのhr行を取得できます。

<div>
    <div style="display:inline-block;width:45%"><hr width='80%' /></div>
    <div style="display:inline-block;width: 9%;text-align: center;vertical-align:90%;text-height: 24px"><h4>OR</h4></div>
    <div style="display:inline-block;width:45%;float:right" ><hr width='80%'/></div>
</div>

2

FlexBoxを使用し、さまざまなスタイルのHR(二重線、線の中心にある記号、ドロップシャドウ、インセット、破線など)も提供するフィドルを作成しました。

CSS

button {
    padding: 8px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 2px;
  }

  button:hover {
    cursor: pointer;
  }

  button.active {
    background-color: rgb(34, 179, 247);
    color: #fff;
  }

  .codeBlock {
    display: none;
  }

  .htmlCode, .cssCode {
    background-color: rgba(34, 179, 247, 0.5); 
    width: 100%;
    padding: 10px;
  }

  .divider {
    display: flex;
    flex-direction: row;
    flex-flow: row;
    width: 100%;
  }

  .divider.fixed {
    width: 400px;
  }

  .divider > label {
    align-self: baseline;
    flex-grow: 2;
    white-space: nowrap;
  }

  .divider > hr {
    margin-top: 10px;
    width: 100%;
    border: 0;
    height: 1px;
    background: #666;
  }

  .divider.left > label {
    order: 1;
    padding-right: 5px;
  }

  .divider.left > hr {
    order: 2
  }

  .divider.right > label {
    padding-left: 5px;
  }
  /* hr bars with centered text */
  /* first HR in a centered version */

  .divider.center >:first-child {
    margin-right: 5px;
  }
  /* second HR in a centered version */

  .divider.center >:last-child {
    margin-left: 5px;
  }
  /** HR style variations **/

  hr.gradient {
    background: transparent;
    background-image: linear-gradient(to right, #f00, #333, #f00);
  }

  hr.gradient2 {
    background: transparent;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }

  hr.dashed {
    background: transparent;
    border: 0;
    border-top: 1px dashed #666;
  }

  hr.dropshadow {
    background: transparent;
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
  }

  hr.blur {
    background: transparent;
    border: 0;
    height: 0;
    /* Firefox... */
    box-shadow: 0 0 10px 1px black;
  }

  hr.blur:after {
    background: transparent;
    /* Not really supposed to work, but does */
    content: "\00a0";
    /* Prevent margin collapse */
  }

  hr.inset {
    background: transparent;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  hr.flared {
    background: transparent;
    overflow: visible;
    /* For IE */
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
  }

  hr.flared:before {
    background: transparent;
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
  }

  hr.double {
    background: transparent;
    overflow: visible;
    /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
  }

  hr.double:after {
    background: transparent;
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
  }

HTML

<div class="divider left">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider right">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>
<p>&nbsp;</p>
<div class="divider left fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider right fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center fixed">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>

または、ここにインタラクティブなフィドルがあります:http : //jsfiddle.net/mpyszenj/439/


2

を実行してfieldset、「凡例」要素(「次のセクション」のテキスト)をborder-top設定するだけでフィールドの中央に配置することができます。凡例がfieldset要素に従ってどのように配置されるかわかりません。それは単純なことかもしれないと思いますmargin: 0px autoでも、トリックをするのはと思います。

例:

<fieldset>
      <legend>Title</legend>
</fieldset>

1

これなしでこれを達成でき<hr />ます。意味的には、CSSを使用して設計を行う必要があります。この場合は、かなり可能です。

div.header
{
  position: relative;
  text-align: center;
  padding: 0 10px;
  background: #ffffff;
}

div.line
{
  position: absolute;
  top: 50%;
  border-top: 1px dashed;
  z-index: -1;
}

<div class="header">
  Next section
  <div class="line">&nbsp;</div>
</div>

1

古き良きFIELDSETは常に存在します

 fieldset
 {
border-left: none;
border-right: none;
border-bottom: none;
 }
 fieldset legend
 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
 }

フィールドセットはフォームでのみ使用する必要があります。
tehlivi 2014年

1

html

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;" class="add-heading">
    <hr class="add-hr">
    <h2>Add Employer</h2>
    <hr class="add-hr">
</div>

CSS

.add-hr { 
    display: block; height: 1px;
    border: 0; border-top: 4px solid #000;
    margin: 1em 0; padding: 0; 
  }

.add-heading h2{
  text-align: center;
}

0

適切な背景画像を使用してラッパーブロックを作成できます(中央揃えのテキストブロックに背景色を設定することもできます)。


0

CSS

.Divider {
width: 100%; height: 30px;  text-align: center;display: flex;
}
.Side{
width: 46.665%;padding: 30px 0;
}
.Middle{
width: 6.67%;padding: 20px 0;
}

HTML

<div class="Divider">
    <div class="Side"><hr></div>
    <div class="Middle"><span>OR</span></div>
    <div class="Side"><hr></div>
</div>

タグ「span」のテキストの長さに基づいて、クラス「side」と「middle」の幅を変更できます。「中央」の幅に「側面」の幅の2倍を加えた値が100%になるようにしてください。


0

レスポンシブな透明な背景、可変の高さと仕切りのスタイル、テキストの可変の位置、仕切りとテキスト間の調整可能な距離。同じプロジェクトの複数の仕切りスタイルの異なるセレクターで複数回適用することもできます。
以下のSCSS。

マークアップ(HTML):

<div class="divider" text-position="right">Divider</div>

CSS

.divider {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.divider:before,
.divider:after {
  content: '';
  flex: 0 1 100%;
  border-bottom: 5px dotted #ccc;
  margin: 0 1rem;
}

.divider:before {
  margin-left: 0;
}

.divider:after {
  margin-right: 0;
}

.divider[text-position="right"]:after,
.divider[text-position="left"]:before {
  content: none;
}

なし text-position中央がデフォルト。

デモ:

そしてSCSS、それを素早く修正する:

$divider-selector    : ".divider";
$divider-border-color: rgba(0,0,0,.21);
$divider-padding     : 1rem;
$divider-border-width: 1px;
$divider-border-style: solid;
$divider-max-width   : 100%;

#{$divider-selector} {
    display: flex;
    align-items: center;
    padding: 0 $divider-padding;
    max-width: $divider-max-width;
    margin-left: auto;
    margin-right: auto;

    &:before,
    &:after {
        content: '';
        flex: 0 1 100%;
        border-bottom: $divider-border-width $divider-border-style $divider-border-color;
        margin: 0 $divider-padding;
        transform: translateY(#{$divider-border-width} / 2)
    }

    &:before {
        margin-left: 0;
    }

    &:after {
        margin-right: 0;
    }

    &[text-position="right"]:after,
    &[text-position="left"]:before {
        content: none;
    }
}

ここでバイオリン


こんにちは、私はあなたのコードスニペットに本当に感謝しています。英語(私の場合は韓国語)以外の区切り文字を使用してテキストを入力すると、テキストは2文字ごとに改行されます。なぜだか分かりますか?
カデンツァ

0

.orSpan{
  position: absolute;
  margin-top: -1.3rem;
  margin-left:50%;
  padding:0 5px;
  background-color: white;
}
<div>
   <hr> <span class="orSpan">OR</span>
</div>

マージンのプロパティを調整する必要があるかもしれません

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.