Question

我猜可以在这里错过一些东西。仍然可以left-align

中的centered 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 [{1}}仍然位于profile-info和grid-row文本的中间

Answer 1

这会使文本框（margin: 0 auto;）居中，这会对齐左侧的文本（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;
}

我编辑了你的小提琴。

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

2 个答案: