我有以下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个文本与红色圆圈的中间对齐(不取决于圆圈半径):

enter image description here

如何使用自适应方式,而不是使用负边距和位置?

推荐答案

这里有一个使用更少标记(我通常更喜欢)的策略.它主要依赖伪元素和左填充.

.content {
  padding-left: 10px; /* space for bigger dots */
}

.content .text {
  padding-top: 10px; /* instead of bottom margin on the title */
  margin-bottom: 20px; /* space between content blocks */
}

.content .title,
.content .text {
  position: relative;
  padding-left: 20px; /* space for the border elements */
}

.content .title:before,
.content .title:after,
.content .text:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 100%;
  transform: translateX(-50%); /* bring it left half width of the line to center it */
  background: red;
}

.content .title:before {
  transform: translate(-50%, -50%); /* up and left half the diameter of the circle to center it */
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.content .title.bigger-dot:before {
  width: 18px;
  height: 18px;
}

.content .title:after,
.content .text:after {
  width: 2px;
}

.content .text:after {
  top: 0;
}
<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?</div>
</div>

<div class="content">
  <div class="title bigger-dot">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>

Html相关问答推荐

Font Awesome 6插入符号未显示

创建具有圆锥渐变的水平CSS聚光灯

当在双引号|Angular .html文件中使用时,Pretier会将单引号字符替换为&;Quot;

为什么这个高度为100%的页面会出现滚动条?

高度:适合-内容不拉伸以适合内部长度

将文本保持在平行四边形内并遵循形状

仅 Select 悬停的级别,而不 Select 其父级或子级

在移动屏幕上显示时分支树视图的响应能力问题

HTML 重定向到当前服务器

下划线在 Bootstrap 5 导航链接下无法正常工作

发送带有图像的Google文档作为HTML格式的邮件正文不再起作用

调整屏幕大小时标题在图像下方重叠 - HTML

在随机图像下对齐文本

如何通过可见文本使用 Selenium 定位元素

使用 rgba() 的 css 中的边框不透明度不起作用

变换元素以适应高度(Angular,SCSS)

使用 bootstrap-icons 的未排序图标堆栈

根据正则表达式 attr 从 read_html 过滤表格

如何使用 nth-child() 设置列表样式

Ionic / ReactJS - Flex 的垂直居中不适用于 Ionic