如何將時間軸與中間的塊居中？

我設法用塊制作了一個時間線模型。它的外觀還可以。您可以運行代碼片段來查看或查看此影像

.list {
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
}

.item:not(:last-child) {
    margin-bottom: 10px;
}

.left {
  display: flex;
  flex-direction: column;
}

.right {
  flex: 1;
  margin-left: 10px;
}

.border {
  width: 1px;
  border-radius: 10px;
  background: black;
  height: 100%;
  margin: 2px auto;
}

.bubble,
.big-bubble {
  padding: 10px 20px;
  border: 1px solid black;
  border-radius: 5px;
}

.big-bubble {
  padding: 30px 0;
  border: 1px solid black;
  border-radius: 5px;
}

<div class="list">
  <div class="item">
    <div class="left">
      <div class="bubble"></div>
      <div class="border"></div>
    </div>
    <div class="right">
      <div class="big-bubble"></div>
    </div>
  </div>
  <div class="item">
    <div class="left">
      <div class="bubble"></div>
      <div class="border"></div>
    </div>
    <div class="right">
      <div class="big-bubble"></div>
    </div>
  </div>
  <div class="item">
    <div class="left">
      <div class="bubble"></div>
      <div class="border"></div>
    </div>
    <div class="right">
      <div class="big-bubble"></div>
    </div>
  </div>
</div>

但我對結果并不滿意。我想像這樣調整我的時間線。這個想法是右側的資訊氣泡從左側氣泡的垂直中間開始。

我不知道如何在 flex 中做到這一點。

uj5u.com熱心網友回復：

為什么不只給出.right一個margin-top等于.left( 11px)高度一半的值？

顯示代碼片段

.list {
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
}

.item:not(:last-child) {
    margin-bottom: 10px;
}

.left {
  display: flex;
  flex-direction: column;
}

.right {
  flex: 1;
  margin-left: 10px;
  margin-top: 11px;
}

.border {
  width: 1px;
  border-radius: 10px;
  background: black;
  height: 100%;
  margin: 2px auto;
}

.bubble,
.big-bubble {
  padding: 10px 20px;
  border: 1px solid black;
  border-radius: 5px;
}

.big-bubble {
  padding: 30px 0;
  border: 1px solid black;
  border-radius: 5px;
}

<div class="list">
  <div class="item">
    <div class="left">
      <div class="bubble"></div>
      <div class="border"></div>
    </div>
    <div class="right">
      <div class="big-bubble"></div>
    </div>
  </div>
  <div class="item">
    <div class="left">
      <div class="bubble"></div>
      <div class="border"></div>
    </div>
    <div class="right">
      <div class="big-bubble"></div>
    </div>
  </div>
  <div class="item">
    <div class="left">
      <div class="bubble"></div>
      <div class="border"></div>
    </div>
    <div class="right">
      <div class="big-bubble"></div>
    </div>
  </div>
</div>

Alteratively，如果你不希望增加的間隙，你可以只給.left一個margin-top的-11px：

顯示代碼片段

.list {
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
}

.item:not(:last-child) {
    margin-bottom: 10px;
}

.left {
  display: flex;
  flex-direction: column;
  margin-top: -11px;
}

.right {
  flex: 1;
  margin-left: 10px;
}

.border {
  width: 1px;
  border-radius: 10px;
  background: black;
  height: 100%;
  margin: 2px auto;
}

.bubble,
.big-bubble {
  padding: 10px 20px;
  border: 1px solid black;
  border-radius: 5px;
}

.big-bubble {
  padding: 30px 0;
  border: 1px solid black;
  border-radius: 5px;
}

<div class="list">
  <div class="item">
    <div class="left">
      <div class="bubble"></div>
      <div class="border"></div>
    </div>
    <div class="right">
      <div class="big-bubble"></div>
    </div>
  </div>
  <div class="item">
    <div class="left">
      <div class="bubble"></div>
      <div class="border"></div>
    </div>
    <div class="right">
      <div class="big-bubble"></div>
    </div>
  </div>
  <div class="item">
    <div class="left">
      <div class="bubble"></div>
      <div class="border"></div>
    </div>
    <div class="right">
      <div class="big-bubble"></div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

通過添加margin-top對.right我有這樣的：

.list {
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
}

.item:not(:last-child) {
    margin-bottom: 10px;
}

.left {
  display: flex;
  flex-direction: column;
}

.right {
  flex: 1;
  margin-left: 10px;
  /* line I adde */
  margin-top:0.7rem;
}

.border {
  width: 1px;
  border-radius: 10px;
  background: black;
  height: 100%;
  margin: 2px auto;
}

.bubble,
.big-bubble {
  padding: 10px 20px;
  border: 1px solid black;
  border-radius: 5px;
}

.big-bubble {
  padding: 30px 0;
  border: 1px solid black;
  border-radius: 5px;
}

<div class="list">
  <div class="item">
    <div class="left">
      <div class="bubble"></div>
      <div class="border"></div>
    </div>
    <div class="right">
      <div class="big-bubble"></div>
    </div>
  </div>
  <div class="item">
    <div class="left">
      <div class="bubble"></div>
      <div class="border"></div>
    </div>
    <div class="right">
      <div class="big-bubble"></div>
    </div>
  </div>
  <div class="item">
    <div class="left">
      <div class="bubble"></div>
      <div class="border"></div>
    </div>
    <div class="right">
      <div class="big-bubble"></div>
    </div>
  </div>
</div>

標籤：css 弹性盒

上一篇：樣式僅適用于ulli{}而不是當我提到這樣的類名時：nav-linksulli{}

下一篇：如何使按鈕位于導航欄下方？