使用Flex布局时无法将标题与hr横向对齐的问题求助

你的问题核心是hr和h4自带的默认外边距干扰了flex布局的对齐，以下是修正后的代码和说明：

修正后的CSS代码 #

.about-header {
    width: 30%;
    display: flex;
    align-items: center; /* 保持垂直居中 */
    gap: 15px; /* 控制横线与标题的横向间距，可按需调整 */
    background-color: red;
}

.about-header hr {
    width: 70px;
    border-width: 2px;
    margin: 0; /* 清除hr默认的上下外边距 */
    border-color: #000; /* 自定义横线颜色，可按需修改 */
    border-style: solid;
}

.about-header h4 {
    font-size: 30px;
    font-weight: 500;
    text-transform: capitalize;
    background-color: blue;
    margin: 0; /* 清除h4默认的上下外边距 */
}

对应的HTML代码（无需修改） #

<div class="about-header"> <hr> <h4>Our Services</h4> </div>

关键调整说明 #

1. 清除hr和h4的默认上下外边距：浏览器默认会给这两个标签添加margin，导致垂直方向出现错位，清除后才能让flex的align-items:center真正生效。
2. 使用gap属性控制横向间距：代替手动加margin，更符合flex布局的规范，也能更精准控制两者的距离。

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