如何对齐所有垂直线，使其与水平线的距离相同

Question

我正在制作一个"时间线"；组件，我想知道如何使垂直线相互对齐，在水平线上方/下方偏移相同的量。

垂直行上面可能有不同数量的文本行，所以我目前使用align-self:center的解决方案在这里不起作用。

.container {
width: 30vw;
height: 100vh;
background-color: aquamarine;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-box {
width: 90%;
position: relative;
}
.timeline-strip {
background-color: yellow;
height: 200px;
display: flex;
overflow-x: scroll; 
}
.timeline-box:before {
content: '';
position: absolute;
top: 50%;
border-top: 2px solid black;
width: 100%;
height: 0px;
}
.point {
margin: 0 7px;
align-self:center;
}
.timeline-point {
width: 90px;
position: relative;
}
.timeline-point:before {
content: '';
position: relative;
left: 50%;
border-left: 2px solid black;
}

<div class="container">
<div class="timeline-box">
<div class="timeline-strip">
<div class="point">
<div>Text 1</div>
<div>Text 2</div>
<div class="timeline-point"></div>
<div class="date">2020-10-05</div>
</div>
<div class="point">
<div class="timeline-point"></div>
<div class="date">2020-10-06</div>
</div>
<div class="point">
<div>Text 1</div>
<div class="timeline-point"></div>
<div class="date">2020-10-07</div>
</div>
<div class="point">
<div>Text 1</div>
<div>Text 2</div>
<div class="timeline-point"></div>
<div class="date">2020-10-08</div>
</div>
<div class="point">
<div class="timeline-point"></div>
<div class="date">2020-10-09</div>
</div>
</div>
</div>
</div>

Answer 1

你想要这样吗？

.container {
width: 30vw;
height: 100vh;
background-color: aquamarine;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-box {
width: 90%;
position: relative;
}
.timeline-strip {
background-color: yellow;
height: 200px;
display: flex;
overflow-x: scroll; 
}
.timeline-box:before {
content: '';
position: absolute;
top: 50%;
border-top: 2px solid black;
width: 100%;
height: 0px;
}
.point {
position: relative;
height: 150px;
bottom: 25px;
margin: 0 7px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.timeline-point {
width: 90px;
position: relative;
}
.timeline-point:before {
content: '';
position: relative;
left: 50%;
border-left: 2px solid black;
}

<div class="container">
<div class="timeline-box">
<div class="timeline-strip">
<div class="point">
<div class="events">
<div>Text 1</div>
<div>Text 2</div>
<div>Text 1</div>
<div>Text 2</div>
</div>
<div class="timeline-point"></div>
<div class="date">2020-10-05</div>
</div>
<div class="point">
<div class="events"></div>
<div class="timeline-point"></div>
<div class="date">2020-10-06</div>
</div>
<div class="point">
<div class="events">
<div>Text 1</div>
</div>
<div class="timeline-point"></div>
<div class="date">2020-10-07</div>
</div>
<div class="point">
<div class="events">
<div>Text 1</div>
<div>Text 2</div>
</div>
<div class="timeline-point"></div>
<div class="date">2020-10-08</div>
</div>
<div class="point">
<div class="events"></div>
<div class="timeline-point"></div>
<div class="date">2020-10-09</div>
</div>
</div>
</div>
</div>