如何在居中的上下文中左對齊文本

Question

我可以猜到我在這里遺漏了一些東西。 仍然無法在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文本？

小提琴

使用的圖像是來自谷歌的隨機 img

編輯：我需要 div profile-info仍然位於grid-row的中間並left-align本

Answer 1

這將文本框居中（ margin: 0 auto; ），並將文本左text-align:left; （ text-align:left; ）。 僅當框的寬度受限時才有效（例如width:300px; ）。

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

Answer 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>

我已經編輯了你的小提琴。