如何在两个div之间添加符合要求的水平分隔线？

问题核心是中间列未正确应用样式且未做垂直居中处理，按以下步骤修改即可实现目标效果：

1. 调整HTML中间列结构 #

给中间的col-md-5添加Bootstrap flex类实现垂直居中，并放入带TicketHorLine类的容器：

<div class="col-md-5 d-flex align-items-center">
    <div class="TicketHorLine w-100"></div>
</div>

2. 优化CSS样式 #

修改TicketHorLine的样式，移除多余内边距并修正圆点形状：

.TicketHorLine {
    border-bottom: 2px solid black;
    position: relative;
    height: 0; /* 避免容器占用垂直空间 */
}
.TicketHorLine:before, .TicketHorLine:after {
    position: absolute;
    bottom: -6px; /* 让圆点与分隔线居中对齐 */
    left: 0;
    height: 10px;
    width: 10px;
    background: black;
    content: "";
    border-radius: 50%; /* 改为正圆形 */
}
.TicketHorLine:after {
    right: 0;
    left: auto;
}

效果说明 #

• d-flex align-items-center让分隔线与两侧模块垂直居中对齐；
• w-100确保分隔线占满中间列的宽度；
• height:0和移除padding-bottom避免分隔线容器额外占用空间，保证布局紧凑；
• border-radius:50%使两端的点呈现正圆形，匹配票券式分隔线的常见设计。

内容的提问来源于stack exchange，提问作者BHAS