web-dev-qa-db-ja.com

中央に単語がある横線のCSSテクニック

私はいくつかのテキストを真ん中にして水平線を引こうとしています。例えば：

-----------------------------------私のタイトルはこちら------------ -----------------

CSSでそれをする方法はありますか？すべての " - "ダッシュがないのは明らかです。

htmlcsscross-browser
239
Jason

これはだいたい私がやりたいことです。行はそれを含むborder-bottomにh2をセットし、それからh2にもっと小さいline-heightを与えることによって作成されます。テキストは透明でない背景を持つ入れ子になったspanに入れられます。

HTML：

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

CSS：

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

私はChromeでのみテストしましたが、他のブラウザでは動作しないはずがないという理由はありません。

JSFiddle： http://jsfiddle.net/7jGHS/

329
Darko Z

さまざまな解決策を試した後、さまざまなテキスト幅、可能な背景、および追加のマークアップを追加せずに有効な解決策を見つけました。

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}
<h1>Heading</h1>
<h1>This is a longer heading</h1>

私はIE8、IE9、FirefoxとChromeでそれをテストしました。こちらで確認できます http://jsfiddle.net/Puigcerber/vLwDf/1/

227
Puigcerber

わかりました、これはより複雑ですが、IE <8以外のすべてで動作します。

<div><span>text TEXT</span></div>

div {
    text-align: center;
    position: relative;
}
span {
    display: inline-block;    
}
span:before,
span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}
span:after {
   right: 0;  
   left: auto; 
}

：before要素と：after要素は絶対位置にあるので、1つを左に、もう1つを右に引くことができます。また、幅（この場合は40％）は、内部のテキストの幅に大きく依存します。そのための解決策を検討する必要があります。少なくともtop: 1.2emは、たとえあなたが異なるフォントサイズを持っていても、行がテキストの中央に多かれ少なかれ確実にとどまるようにします。

それはうまくいくようですが： http://jsfiddle.net/tUGrf/3/

54
Stephan Muller

さらに別の方法：

span:after,
span:before{
    content:"\00a0\00a0\00a0\00a0\00a0";
    text-decoration:line-through;
}
<span> your text </span>
37
Rafael

これがFlexベースのソリューションです。

HTML：

<h1>Today</h1>

CSS：

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}

JSFiddle： https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

26
Tsuneo Yoshioka

最近のブラウザではdisplay:flexとpseudo-elementsを使うと簡単に描画できます。 border-style、box-shadow、さらにはbackgroundでさえもメイクアップに役立ちます。 demo below

h1 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}
<h1>side lines via flex</h1>
17
G-Cyr
.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">Text</div>
10
Sujal Patel
<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

テキストと行の間にスペースを空けるために、スパンに余白を入れます。

例： http://jsfiddle.net/tUGrf/

9
Stephan Muller

私はこの単純な装飾のためのいくつかの解決策を見回してきました、そして私はフォントの高さを計算するためのJSとbla、bla、blaを含むかなりの数のものを見つけました。この記事の1つとfieldsetとlegendについて話すthirtydotからのコメントを読んで、私はそれだと思いました。

私はそれらの2つの要素スタイルをオーバーライドしています、私はあなたがそれらのためにW3C標準をコピーしてあなたの.middle-line-textクラスに含めることができると思います（しかしあなたがそれを呼びたいものは何でも）

<fieldset class="featured-header">
    <legend>Your text goes here</legend>
</fieldset>

<style>
.featured-header{
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
 }

.featured-header legend{
    -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
    -webkit-padding-end: 8px; 
    background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
    font-weight: normal; /* I preffer the text to be regular instead of bold  */
    color: YOU_CHOOSE;
}   

</style>

これがフィドルです。 http://jsfiddle.net/legnaleama/3t7wjpa2/

私はボーダースタイルで遊んだし、それはまたAndroidで動作します;）（KitKat 4.XXでテスト済み）

編集：

Bekerov Arturの考えでもありますが、私は.png base64イメージを.SVGでストロークを作成するように変更しました。これにより、他のソフトウェアを使用せずに任意の解像度でレンダリングし、要素の色を変更できます。

/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}
7
legnaleama

IE8以降のソリューション...

注目に値する問題：

background-colorを使用して境界線を隠すのは最善の解決策ではないかもしれません。複雑な（または未知の）背景色（または画像）がある場合、マスキングは最終的に失敗します。また、テキストのサイズを変更すると、白い背景色（または設定したもの）が上（または下）の行のテキストを覆い始めます。

また、セクションの幅をどの程度広くしても「推測」したくない場合があります。これは、スタイルが非常に柔軟でなく、コンテンツの幅が広いレスポンシブサイトに実装するのがほとんど不可能になるためです変わってきている。

解決策：

（表示 JSFiddle）

background-colorで境界を「マスキング」する代わりに、displayプロパティを使用してください。

HTML

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

CSS

.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }

font-sizeプロパティを.group要素に配置してテキストのサイズを変更します。

制限事項：

  • 複数行のテキストはありません。単一行のみ。
  • HTMLマークアップはそれほどエレガントではありません
  • .line要素のtopプロパティは、line-heightの半分である必要があります。したがって、line-heightの1.5emがある場合、topは-.75emになります。これは自動化されていないため制限です。また、高さの異なる要素にこれらのスタイルを適用する場合は、line-heightスタイルを再適用する必要があります。

私にとっては、これらの制限が、ほとんどの実装に対する私の答えの冒頭で述べた「問題」よりも重要です。

5
Mike McLin

これは静的な線幅を与えますが、うまく機能します。行幅は、 '\ 00a0'（Unicodeスペース）を追加または取ることによって制御されます。

h1:before, h1:after {
  content:'\00a0\00a0\00a0\00a0';
  text-decoration: line-through;
  margin: auto 0.5em;
}
<h1>side lines</h1>
4
tomyo

非常に多くの選択肢から、私はそれが今日のブラウザをマルチクロスしているので この答え を好むでしょう。

私はそれを私のホームページのうちの複数のものを使っています。特にメインページではは単一の<h1>のみを持つことをお勧めします。そのため、h1をh2以上に変更する必要があります。

h2 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h2:before, h2:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}
<h2>side lines via flex</h2>
3
Chetabahana
h6 {
    font: 14px sans-serif;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}

    h6.background {
        position: relative;
        z-index: 1;
        margin-top: 0%;
        width:85%;
        margin-left:6%;
    }

        h6.background span {
            background: #fff;
            padding: 0 15px;
        }

        h6.background:before {
            border-top: 2px solid #dfdfdf;
            content: "";
            margin: 0 auto; /* this centers the line to the full width specified */
            position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            width: 95%;
            z-index: -1;
        }

これはあなたを助けるでしょう


2
Dominic Amal Joe F

動的に垂直方向に配置するために、辺を動的に埋めるためのテーブルレイアウトと、高さ0、絶対位置divを使用します。

enter image description here

  • ハードコードされた寸法なし
  • 画像がありません
  • 疑似要素はありません
  • 背景を尊重する
  • コントロールバーの外観

https://jsfiddle.net/eq5gz5xL/18/

私は、真ん中より少し下がテキストで最もよく見えることを発見しました。これは55%があるところで調整できます（より高い高さはバーをより低くします）。 border-bottomがある場所で行の外観を変更することができます。

HTML：

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

CSS：

.title{
  display: table;
  width: 100%
  background: linear-gradient(to right, white, lightgray);
}
.title-row{
  display: table-row;
}
.bar-container {
  display: table-cell;
  position: relative;
  width: 50%;
}
.bar {
  position: absolute;
  width: 100%;
  top: 55%;
  border-bottom: 1px solid black;
}
.text {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 36px;
}
2
Micropig

だれかが左側に固定された距離で表示されるように見出しを設定する方法について疑問に思っている場合（そして上の図のように中央に配置されていない場合）、@ Puigcerberのコードを変更して考えました。

h1 {
  white-space: nowrap;
  overflow: hidden;
}

h1:before, 
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
}

h1:before {
  right: 0.3em;
  width: 50px;
}

h1:after {
  left: 0.3em;
  width: 100%;
}

ここでは JSFiddle です。

2
m4r73n

死んだ馬を倒さないために、私は解決策を探していたのですが、結局のところ私は選択肢に満足できませんでした。 （おそらく私の側のエラーによる…）しかし私はflexboxで遊んでいて、これが私が自分のために働くために得たものです。

設定のいくつかはハードワイヤードですが、デモンストレーションの目的のためだけです。私はこの解決策がほぼすべての現代のブラウザでうまくいくはずだと思います。 .flex-parentクラスの固定設定を削除/調整し、色/テキスト/ものを調整するだけで、（この方法を使用したときと同じように）満足できるでしょう。

HTML：

.flex-parent {
  display: flex;
  width: 300px;
  height: 20px;
  align-items: center;
}

.flex-child-Edge {
  flex-grow: 2;
  height: 1px;
  background-color: #000;
  border: 1px #000 solid;
}
.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
}
<div class="flex-parent">
  <div class="flex-child-Edge"></div>
  <div class="flex-child-text">I found this simpler!</div>
  <div class="flex-child-Edge"></div>
</div>

私はまた私の解決策をここに保存しました： https://jsfiddle.net/Wellspring/wupj1y1a/1/

0
Wellspring

Bootstrap 4を使用している人は、この方法で達成できます。 HTMLコードで言及されているクラスは、Bootstrapからのものです4。

h1 {
    position: relative;
    flex-grow: 1;
    margin: 0;
}

h1:before {
   content: "";
   display: block;
   border-top: solid 2px blue;
   width: 100%;
   height: 1px;
   position: absolute;
   top: 50%;
   z-index: 1;
 }
 h1 span {
   background: #fff;
   left: 12%;
   padding: 0 15px;
   position: relative;
   z-index: 5;
 }

そして、あなたのHTMLをこのように書きます

<div class="d-flex flex-row align-items-center">
  <h1><span> Title </span> </h1>
</div>
0
Akshay Patwa

私は提案した方法のほとんどを試してみましたが、全角や動的コンテンツには適していないなどの問題で終わります。最後に私はコードを修正し、そして完璧に動作します。このサンプルコードは前後にそれらの線を引くでしょう、そしてそれは内容変更において柔軟です。中央も揃えました。

HTML

        <div style="text-align:center"> 
            <h1>
                <span >S</span>
            </h1> 
        </div> 

        <div style="text-align:center"> 
            <h1>
                <span >Long text</span>
            </h1> 
        </div>

CSS

      h1 {
            display: inline-block;
            position: relative;
            text-align: center;
        }

        h1 span {
            background: #fff;
            padding: 0 10px;
            position: relative;
            z-index: 1;
        }

        h1:before {
            background: #ddd;
            content: "";
            height: 1px;
            position: absolute;
            top: 50%;
            width: calc(100% + 50px);//Support in modern browsers
            left: -25px;
        }

        h1:before {
            left: ;
        }

結果： https://jsfiddle.net/fasilkk/vowqfnb9/

0
Fasil kk

私にとっては、この解決策は完璧に動作します。

HTML

<h2 class="strikethough"><span>Testing Text</span></h2>

CSS

.strikethough {
 width:100%; 
 text-align:left; 
 border-bottom: 1px solid #bcbcbc; 
 overflow: inherit;
 margin:0px 0 30px;
 font-size: 16px;
 color:#757575;
 }
.strikethough span {
 background:#fff; 
 padding:0 20px 0px 0px;
 position: relative;
 top: 10px;
}
0
طلحة

Horizo​​ntalおよびVertical行の中央に単語

.box{
    background-image: url("https://i.stack.imgur.com/N39wV.jpg");
    width: 350px;
    padding: 10px;
}

/*begin first box*/
.first{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 0 2px 0 2px;
    border-color: red;
    border-style: solid;
    position: relative;
}

.first span {
    position: absolute;
    display: flex;
    right: 0;
    left: 0;
    align-items: center;
}
.first .foo{
    top: -8px;
}
.first .bar{
    bottom: -8.5px;
}
.first span:before{
    margin-right: 15px;
}
.first span:after {
    margin-left: 15px;
}
.first span:before , .first span:after {
    content: ' ';
    height: 2px;
    background: red;
    display: block;
    width: 50%;
}


/*begin second box*/
.second{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 2px 0 2px 0;
    border-color: red;
    border-style: solid;
    position: relative;
}

.second span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.second .foo{
    left: -15px;
}
.second .bar{
    right: -15.5px;
}
.second span:before{
    margin-bottom: 15px;
}
.second span:after {
    margin-top: 15px;
}
.second span:before , .second span:after {
    content: ' ';
    width: 2px;
    background: red;
    display: block;
    height: 50%;
}
<div class="box">
    <div class="first">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>

   <br>

    <div class="second">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>
</div>

これは https://stackoverflow.com/a/57279326/6569224 でも回答されています

0
Mahdi Bashirpour

よくわかりませんが、水平罫線を使用してテキストを上の余白より上に移動させることができます。段落タグと背景には固定幅が必要です。それは少し厄介です、そして、私はそれがすべてのブラウザでうまくいくかどうかわかりません、そしてあなたはフォントのサイズに基づいてマイナスマージンを設定する必要があります。クロムで動作します。

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>
0
Munim