html - 如何在居中上下文中左对齐文本

Question

我可以猜到我在这里遗漏了一些东西。仍然无法在居中的 div

中左对齐文本

这是我最终作品的模拟样本:

<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

使用的图像是来自 google 的随机 img

编辑: 我需要 div profile-info 仍然位于 grid-row 的中间并且 left-align 它的文本

Answer 1

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

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