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

Question

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

Answer 1

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