如何对齐div中被Angular Material垂直分割线分隔的两侧文本

问题根源 #

.content容器下的.titleContent、mat-divider、.textContent三个子元素没有统一的横向布局规则，.textContent为默认块级元素，会自动换行到下一行显示。

解决方案 #

无需修改HTML结构，仅调整CSS样式即可，推荐用Flex布局实现，稳定性更高：

section{
    padding: 30px 50px;
}

.about{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.about .content{
    min-width: 800px;
    /* 新增以下3行，开启flex横向布局 */
    display: flex;
    align-items: center;
    gap: 20px;
}

.about .content mat-divider{
    border: 2px solid;
    height: 100px;
    /* 移除原有的position、vertical-align、display等冗余属性 */
}

.about .content .titleContent > h2{
    max-width: 200px;
    margin: 0; /* 可选：清除h2默认上下边距，对齐更整齐 */
}

.about .content .textContent{
    overflow: auto;
    flex: 1; /* 新增：让文本区域自动填充剩余宽度 */
}

效果验证 #

修改后三个元素会自动横向排列，垂直分割线与两侧内容垂直居中对齐，文本区域自动占满剩余宽度，不会出现换行下沉的问题。如果需要调整垂直对齐方式，仅需修改.about .content的align-items属性值即可。

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