How to center a timeline with blocks in the middle?-CodePudding

I managed to make a mockup of a timeline with blocks. It has a look that is ok. You can run the snippet to take a look or see this image

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

But I'm not satisfied with the result. I would like to align my timeline like this. The idea would be that the info bubble on the right starts in the vertical middle of the bubble on the left.

I don't see how to do it in flex.

CodePudding user response：

Why not just give .right a margin-top that is equal to half the height of .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 >
  <div >
    <div >
      <div ></div>
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
  </div>
  <div >
    <div >
      <div ></div>
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
  </div>
  <div >
    <div >
      <div ></div>
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
  </div>
</div>

Alteratively, if you don't want the increased gap, you can just give .left a margin-top of -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 >
  <div >
    <div >
      <div ></div>
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
  </div>
  <div >
    <div >
      <div ></div>
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
  </div>
  <div >
    <div >
      <div ></div>
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
  </div>
</div>

CodePudding user response：

By adding a margin-top on .right I have this :

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