如何在居中的上下文中左对齐文本答案

【问题标题】：How to left-align text in a centered context如何在居中的上下文中左对齐文本
【发布时间】：2021-03-08 23:25:14
【问题描述】：

我可以猜到我在这里遗漏了一些东西。仍然无法在centered div 中输入left-align 文本

这是我最终作品的模仿样本：

<div class="grid-row">
        <img src="http://www.fununlimitedsports.com/wp-content/images/istockSUP.jpg" />
        <div class="profile-info">
            <div class="name"><a href="#">STUDENT NAME '14</a></div>
            <div class="occupation">Toured nationally with “West Side Story”</div>
            <div class="major">MAJOR: MUSIC THEATRE</div>
        </div>
    </div>

css:

 .grid-row {
        max-width: 980px;
        margin: 0 auto;
        position: relative;
        border: 1px solid green;
        text-align:center;
    }

如何让profile-info div 居中在grid-row 中，同时为它的内容维护一个left-aligned 文本？

fiddle

使用的图片是来自谷歌的随机图片

编辑：我需要 div profile-info 仍然位于 grid-row 和 left-align 其文本的中间

【问题讨论】：

您是否认为.grid-row 上的text-align: center; 规则以.profile-info div 为中心？因为这不是它的工作方式。
不，我知道其父级的 margin 确实如此。
margin 上的 .grid-row 规则以 .grid-row 为中心。它对于在 .grid-row 中放置 .profile-info 没有任何作用。
嗯，是的。我以为您是在谈论将整个事物集中在屏幕上。我明白了，谢谢

标签： html css text-alignment

【解决方案1】：

这会使文本框居中 (margin: 0 auto;)，并使文本左对齐 (text-align:left;)。仅当框的宽度有限时才有效（例如width:300px;）。

.profile-info {    
   border:1px solid gray;
   text-align:left;
   width:300px;
   margin: 0 auto;
}

【讨论】：

【解决方案2】：

.grid-row {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    border: 1px solid green;
    text-align:center;
}

.profile-info {
    border:1px solid gray;
    margin:0 auto;
    text-align:left;
    width:200px;
}

<div clas="grid-row">
  <div class="profile-info">
    info
  </div>
</div>

我已经编辑了你的小提琴。

【讨论】：

没错，谢谢。 margin 0 auto 是缺少的东西
!important 是不必要的。
这不起作用。我将代码粘贴在小提琴中，文本左对齐但 not 居中。
文本应在居中的容器内左对齐。检查 sn-p 并查看它是否有效。