如何对齐由 divider 分隔的 div 中的文本

Question

所以我正在为我的副项目尝试 angular material 分隔线，但我在对齐文本时遇到了一些问题

从图中可以看出，右侧的文字没有放在竖线旁边，而是放在竖线和左侧文字的下面。

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 进行修改时进行对齐，但它没有用，因为我对前端的工作原理知之甚少。

感谢任何帮助！

Answer 1

只需为 .content 赋予显示弹性 class

 .content{
   display:flex;
 }

如何对齐由 divider 分隔的 div 中的文本

How to align text within a div separated by a divider

html

css

angular-material

angular