Html 如何仅制作柔性柱的一部分'；文本居中，其他部分左对齐？

我试图使“关于Lorem”居中，而文本的其余部分左对齐

如何做到这一点？ 我尝试将“About Lorem”包装在一个范围内，并给它一个不同的文本对齐属性，但它没有对这个更改做出反应，所以我恢复了代码。 谢谢你的帮助

.container{
宽度：75%；
}
boxOuter先生{
填充：45px；
背景：黑色；
}
.盒子{
显示器：flex；
宽度：75%；
高度：500px；
位置：相对位置；
保证金：0自动；
高度：500px；
/*溢出：隐藏*/
背景：浅蓝色；
对齐项目：居中；
}
.左栏{
弹性基准：10%；
/*背景：浅蓝色*/
自对准：居中；
}
.右上校{
背景：绿色；
文本对齐：居中；
}

关于Lorem


罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳


罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳


罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳

嗯，这里有个问题<代码>s不接受文本对齐，因为它是内联的。您可以将

与类一起使用，将其加粗并删除其边距。让我告诉你如何： 您需要将

更改为

并向其中添加一个类：

<p class="about">About Lorem</p>

结果:

嗯。。。这看起来有点不对。因此，我们可以添加一个填充顶部，使其有一定的距离，而不接触家长的顶部

.about{
    text-align:center;
    font-weight: bold;
    margin-top:0px;
    margin-bottom:0px;
    padding-top: 15px;
}

结果:

完整代码：

        <section class="section-about">
            <div class="container">
                <div class="boxOuter">
                    <div class="box">
                        <div class="left-col"><img src="https://i1.wp.com/pokejungle.net/wp-content/uploads/2019/04/Pikachu.gif?resize=653%2C724&ssl=1" width="200px"></div>
                        <div class="right-col">
                            
                                <p class="about">About Lorem</p>
                                <br>
                                lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
                                <br>
                                lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
                                <br>
                                lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <style>
            .about{
                text-align:center;
                font-weight: bold;
                margin-top:0px;
                margin-bottom:0px;
                padding-top: 15px;
            }

            .container{
                width:75%;
            }

            .boxOuter{
                padding:45px;
                background:black;
            }

            .box{
              display: flex;
              width: 75%;
              height: 500px;
              position: relative;
              margin: 0 auto;
              height: 500px;
              /*overflow: hidden;*/
            background: lightblue;    
                align-items:center;



            }
            .left-col {
              flex-basis: 10%;
              /*background: lightblue;*/
            align-self:center;


            }

            .right-col {
                background: green;
                text-align:left;

            }
        </style>

关于Lorem



罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳


罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳


罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳
.关于{
文本对齐：居中；
字体大小：粗体；
边际上限：0px；
边缘底部：0px；
填充顶部：15px；
}
.集装箱{
宽度：75%；
}
boxOuter先生{
填充：45px；
背景：黑色；
}
.盒子{
显示器：flex；
宽度：75%；
高度：500px；
位置：相对位置；
保证金：0自动；
高度：500px；
/*溢出：隐藏*/
背景：浅蓝色；
对齐项目：居中；
}
.左栏{
弹性基准：10%；
/*背景：浅蓝色*/
自对准：居中；
}
.右上校{
背景：绿色；
文本对齐：左对齐；
}

（一个片段看起来很糟糕，因为它很小，所以我没有添加一个）

另外，问题不是关于flexbox，因为右边的col不是flexbox

        <section class="section-about">
            <div class="container">
                <div class="boxOuter">
                    <div class="box">
                        <div class="left-col"><img src="https://i1.wp.com/pokejungle.net/wp-content/uploads/2019/04/Pikachu.gif?resize=653%2C724&ssl=1" width="200px"></div>
                        <div class="right-col">
                            
                                <p class="about">About Lorem</p>
                                <br>
                                lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
                                <br>
                                lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
                                <br>
                                lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <style>
            .about{
                text-align:center;
                font-weight: bold;
                margin-top:0px;
                margin-bottom:0px;
                padding-top: 15px;
            }

            .container{
                width:75%;
            }

            .boxOuter{
                padding:45px;
                background:black;
            }

            .box{
              display: flex;
              width: 75%;
              height: 500px;
              position: relative;
              margin: 0 auto;
              height: 500px;
              /*overflow: hidden;*/
            background: lightblue;    
                align-items:center;



            }
            .left-col {
              flex-basis: 10%;
              /*background: lightblue;*/
            align-self:center;


            }

            .right-col {
                background: green;
                text-align:left;

            }
        </style>