html - 如何对齐由分隔符分隔的 div 中的文本

Question

所以我正在为我的副项目尝试有角度的材质分隔器，但在对齐文本时遇到了一些问题

从图片中可以看出，右侧的文本不是放置在垂直线旁边，而是放置在垂直线和左侧文本的下方。

HTML 代码：

<section class="about" id="about">
<div class="content">
    <div class="titleContent">
        <h2> Title Here </h2>
    </div>
    <mat-divider [vertical]="true"></mat-divider>
    <div class="textContent">
        <p> Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum
            Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum
            Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum
        </p>
    </div>
</div>

CSS：

section{
    padding: 30px 50px;
}

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

.about .content{
    min-width: 800px;
}

.about .content mat-divider{
    border: 2px;
    border-style: solid;
    height: 100px;
    width: 0px;
    position: inherit !important;
    vertical-align: middle;
    display: inline-flex;
}

.about .content .titleContent > h2{
    max-width: 200px;
}

.about .content .titleContent{
    display: inline-flex;
    margin-right: 20px;
}

.about .content .textContent{
    overflow: auto;
}

我尝试在使用 google chrome 进行修改时进行对齐，但它不起作用，因为我对前端的工作原理几乎一无所知。

任何帮助表示赞赏！

标签： htmlcssangularangular-material

Answer 1

只需将 display flex 赋予 .content 类

 .content{
   display:flex;
 }