我有以下HTML struct :
https://play.tailwindcss.com/se2rJ5Y3wt?file=css
.block {
display: flex;
}
.timeline {
display: flex;
flex-direction: column;
min-height: max-content;
align-items: center;
justify-content: flex-start;
}
.circle {
background: red;
width: 8px;
height: 8px;
border-radius: 50%;
}
.vline {
width: 2px;
background: red;
height: 100%;
margin-top: 2px;
}
.content {
padding-left: 10px;
}
.title {
margin-bottom: 10px;
}
<div class="block">
<div class="timeline">
<div class="circle"></div>
<div class="vline"></div>
</div>
<div class="content">
<div class="title">Header</div>
<div class="text">Wait! Some of your past questions have not been well-received, and you're in danger of being blocked from asking any more. For help formulating a clear, useful question, see: How do I ask a good question? Also, edit your previous questions to improve
formatting and clarity.Wait! Some of your past questions have not been well-received, and you're in danger of being blocked from asking any more. For help formulating a clear, useful question, see: How do I ask a good question? Also, edit your previous
questions to improve formatting and clarity.</div>
</div>
</div>
问题是我试图将.title
个文本与红色圆圈的中间对齐(不取决于圆圈半径):
如何使用自适应方式,而不是使用负边距和位置?