CSS：真ん中線を中心に 左右等間隔に配置する方法

Question

画像のように<hr>を中心に左右の<div>要素を等間隔に配置したいです。

<wrapper>：relative、<hr>：absoluteで真ん中に配置し、
左右の<div>をマージン調整を試しましたが、うまくいきません。

より良いやり方などありましたら、教えていただきたいです。
宜しくお願いします。

Comments

[m.ts10806]

「うまくいかない」などで伝わる情報量はゼロなので
ご自身の書いたコードと具体的に起きている現象を記載してください。
https://teratail.com/help/question-tips#questionTips3-4-1

Answer 1

flexで横並びにして、hr に高さを設定すると縦線になります。

<div class="wrapper">
  <div>あああああ</div>
  <hr>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
  </ul>
</div>

.wrapper {
  border: 1px solid;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200px;
}
.wrapper div,
.wrapper ul{
  width: 30%; 
  background-color: red;
}
.wrapper hr {
  height: 2em;
  margin: 0
}

.wrapper ul{
  display: flex;
  list-style: none;
  justify-content: space-around;
}

Comments

[NS2021]

マージンで調整するのではなく、wrapper-divとwrapper-ulのwidthを同じにしてその２つの要素をspace-aroundにすることでうまく出来ました。ありがとうございました！

Answer 2

垂直線を引きたいのですか？
残念ながら、hrでは垂直線は引くことはできません。

ですので、列が2つ、行が1つの表を作り、その表をスタイルシートで真ん中の棒だけ黒くするようにしたらどうでしょうか。
たとえば。

<ul>
  <li>
    <h2>独自カリキュラム</h2>
    <p>初心者でも効率的にステップアップしていけるよう最適化されたカリキュラムで学習します。</p>
  </li>
  <li>
    <h2>チャットサポート</h2>
    <p>チャットサポートでは毎日のサポート時間内に随時質問ができ、即回答をもらうことができます。</p>
  </li>
</ul>

*{
  box-sizing:border-box;
}
ul{
  list-style:none;
  width:100%;
  display:flex;
  justify-content:space-between;
  li{
    width:48%;
    padding:0 10px;
    &:first-child{ 
      border-right:1px solid #ccc;
    }
    h2{
      font-size:16px;
    }
    p{
      font-size:12px
    }
  }
}

ご参考までに。