如何将时间线居中，块位于中间？

Question

我成功地用块制作了时间线的模型。它看起来还不错。您可以运行代码片段来查看或查看此图像：

.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 来做到这一点。

Answer 1

为什么不直接给

.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>

或者，如果您不想增加间隙，您可以直接给

.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>

Answer 2

通过在

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>