真ん中に区切り線を設置したい

Question

２つの要素を左右に設置し、真ん中に区切り線を設置したいのですが、方法が分からないです。
具体的には、下記の画像のようにしたいと考えています。

以下は現時点で作成しているコードになります。

 <div class="info">
        <p class="name">データ</p>
        <div>
          <p>test</p>
          <p>項目1:数学</p>
          <p>項目2:英語</p>
        </div>
      </div>

.name::after{
    content:"";
    display:inline-block;
    height:3rem;
    background-color:red;
    border: solid 1px;
  }
  .info{
    display: flex;
    justify-content: space-around;
    background-color: #F5F5F5;
    border: solid 1px #C4C4C4;
    
  }

after要素にheightを設定してみましたが、「テスト」の文字がどんどん下がっていってしまい、margin-leftを設定しても、バーが詰まってしまったような形であまり動かない状態です。

jsfiddleにて、動作確認可能な状態となっております為、こちらよりご確認頂けましたら幸いです。

ご助言の程、よろしくお願いします。

Answer 1

このような方法はいかがでしょうか。

• 左右ブロックの幅を同じにするためflex-growを設定
• ブロックの内容を中央表示するため flexboxのcenterを使用
• 長さと位置が自由な区切り線にはbackground-imageでlinear-gradientを使用

CSSのborderは良くも悪くも要素の外枠の長さぴったりでしか描けません。しかし、background-imageとlinear-gradientを使えば、ボーダーのような物が長さ自由で描けるので、それを利用します。

実現すると、以下のようなコードになります。

<div class="info">
  <p class="name">データ</p>
  <div class="item">
    <div>
      <p>テスト</p>
      <p>項目1:数学</p>
      <p>項目2:英語</p>
    </div>
  </div>
</div>

.info {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: stretch;
  background-color: #F5F5F5;
  border: solid 1px #C4C4C4;
}

.name,
.item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.name {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: calc(50% + 1px);
  max-width: calc(50% + 1px);
  margin: 0;
  padding: 0 1px 0 0;
  background-image: linear-gradient(#C4C4C4, #C4C4C4);
  background-repeat: no-repeat;
  background-size: 1px 80%;
  background-position: right center;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
}

これですと、仮にユーザーがブラウザのウィンドウサイズを変更し、infoクラスdiv要素の幅が変わったとしても、区切り線は（ほぼ）中央位置のままです。

なお、nameクラスp要素の範囲内で背景として線を描くため、そのままですと、この区切り線は完全な中心線ではなく、nameクラスp要素に1px分寄った線になります。

その対策として、nameクラスにpadding-right: 1px;を設定し、nameクラスの幅をitemクラスより1px分大きくして、区切り線が中心にくるように調整しています。

とはいえ、今回はwidth関連の値に%を用いたため、描画時に値が算出される際に小数点以下がどう処理されるかによって、若干中央からズレる可能性はあります。

---

ちなみに、background-imageにはlinear-gradientを複数設定できますので、区切り線を２本線や３本線にカスタマイズすることも可能です。

例えば以下は、２本線にする場合の.nameです。

.name {
  flex-grow: 1;
  margin: 0;
  padding: 0 4px 0 0;
  background-image: linear-gradient(#C4C4C4, #C4C4C4),
                    linear-gradient(#C4C4C4, #C4C4C4);
  background-repeat: no-repeat;
  background-size: 1px 80%, 1px 80%;
  background-position: right center, calc(100% - 4px) center;
}

---

#####追記：flexにしたp要素のテキスト位置について

p要素の内容物であるテキストは、それ自体は要素ではありませんが、独自の表示範囲を持っています。p要素をflexにすると、p要素のテキストと（存在する場合は）擬似要素のbeforeとafterの内容が、flex設定通りに表示されます。

上のコードの一部を、以下のように変更して、どう表示されるか試してみてください。

<p class="name">データ<br>デー<br>デ</p>

/* 既存の.nameに追加で */
.name {
  text-align: left;
}

.name::before {
  content: 'before';
  background-color: gold;
}

.name::after {
  content: 'after';
  background-color: lightskyblue;
}

p要素のbefore、テキスト、afterが、flex設定によりcenterにrow並びで表示され、テキスト自体はテキスト範囲内で左揃えに表示されているのが確認できるかと思います。

.nameのtext-alignをrightやcenterに変更してみると、テキスト枠内で文字が整列されるのがより明確に分かるでしょう。

なおテキストは、このように要素の設定で位置を制御することも可能ですが、テキスト自体は要素ではないため直接制御することはできません。

テキストを個別に装飾したい場合は、spanタグ等で囲み、要素化する必要があります。

一度、以下のようなシンプルなテストコードを使って、デフォルトのp要素とテキストの背景に色を付けてtext-alignがleft、center、rightの時の各位置を見ておくと、flex設定時との違いがよく分かるかもしれません。

<p style="background-color: mistyrose; text-align: center;"><span style="background-color: lightskyblue;">テキスト</span></p>

Comments

[study_111]

ご丁寧にご回答下さり、ありがとうございます。
「background-image」を使用し、縦線を描画する方法は、思い付きもしなかった為、このような方法があるのだなと大変勉強になりました。
更に、「flex-grow」を用いることで、widthを設定せずとも均等に幅を設定出来るといったことも、勉強になりました。
しかし、度々申し訳ないのですがCSSスタイル適用部分におきまして、どうしても分からない箇所がありお聞きしたいことがございます。
以下の部分では、.nameに対して、display:flexやjustify-content:の指定がありますが、こちらのプロパティは、子要素に対してのレイアウト調整のプロパティであると認識しております。
しかし、以下、スタイル指定から「.name」の指定を外すと、「データ」の文字が左上へとずれてしまいます。
こちらの現象は、親要素に指定していても、文字列などが指定されていた場合はその値に対しても適用が行われるということなのでしょうか...？
「.name,
.item {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
} 」

[arenomarb]

width関連をきちんと設定した方が動作は安定します。そのままですとflex-grow設定よりも内容の大きさが優先されますので、内容によってはレイアウトが崩れます。例えば、p要素のテキストが長文になると、p要素幅が広がり、区切り線は中央ではなくなります。

その崩れを防止する一例として、上のコードの.nameにmin-widthとmax-widthを加えておきました。また、場合によっては固定のwidthやflex-shrinkが役立つこともあります。flex-shrinkはデフォルト値が1なので今回は書く必要はありませんが、参考までに足しておきました。

p要素のテキスト位置についても回答に説明を追加しました。

[study_111]

誠にご丁寧にご説明下さり、ありがとうございます。
自分はそもそも「calc」といった関数があることすら知らなかったので、本当に、色々と勉強になっております。
ご提示頂いたコードの、flexboxに関しましても、今までは要素を横並びにする為にだけ使っていたのですが、今回のように「.name」の「p」要素(display:flexを設定した要素)のテキストを上下左右中央揃えにする時にも使用出来ることは大変便利だと感じましたし、今後も使用していきたいと思いました。
さらには、今まで、例えば「display:flex」を設定した「.info」の子要素に対して、それぞれ「width:50%」を設定し同じ幅になるように指定していたのですが、こちらは、「flex-grow」を指定することで余った幅を分け合い、結果的に同じ幅を得ることが出来るというのも、本当に参考になりました。
今回、フロントエンドは覚えることが多く、難しく、奥が深いというのを痛感致しました。
教えて頂いたことを参考に、今後も勉強を続けていきたいと思います。

Answer 2

ソースは変えずにCSSのみ修正してみました。
.infoブロック全体に疑似要素を使用しました。

  .info {
    display: flex;
    position:relative;
    justify-content: space-around;
    background-color: #F5F5F5;
    border: solid 1px #C4C4C4;
  }
　 .info::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 1px;
    height: 80%;
    background-color: #C4C4C4;
    transform: translate(0,-50%);
  }