为什么＆＃34; text-align：left;＆＃34;在这里不起作用？

Question

我在css类text-align: left;中使用过name-tag但不知何故名称仍然与div的右侧对齐。为什么呢？

＆＃13;

＆＃13;

.container {
    width:500px;
    position:absolute;
    display:table;
    border: 2px solid red;
}

.img-circle {
    background: yellow;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: 2px solid  #666;
    font: 32px Arial, sans-serif;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.name-tag {
    display:table-cell;
    padding-left:75px;
    vertical-align: middle;
    text-align: left;
    border: 1px solid black;
}

＆＃13;

<div style="container">
    <div class='img-circle'>
        AK
    </div>
    <div class='name-tag'>
        Aaron King
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

示例代码可在此处找到：http://jsfiddle.net/kongakong/6Lrfwt7m/3/

结果如下：

Answer 1

它与左边对齐，你只需要大填充，使它看起来不像。删除padding-left:75px;，问题就解决了。

Answer 2

在你的小提琴中，你有<div style="container">而不是<div class="container">

然后你有75px的填充，所以它不完全在左边。

Answer 3

问题是左侧有填充，因此单元格似乎在右侧对齐。

如果删除填充，您可以看到它正常工作。 检查这个小提琴：

.name-tag {
display:table-cell;
padding-left:75px;
vertical-align: middle;
text-align:left;
border: 1px solid black;
padding-left:0;
padding-right:30px;

}

http://jsfiddle.net/6Lrfwt7m/8/

Answer 4

为填充中固定的宽度添加CSS Box大小。

.name-tag {

        display:table-cell;
        padding:10px;
        vertical-align: middle;
        text-align: left;
        border: 1px solid black;
    box-sizing:border-box;

}