为什么“text-align：left;”在这里不行？

我在css类name-tag中使用了text-align: left;，但不知何故名称仍然对齐到div的右侧。为什么？为什么“text-align：left;”在这里不行？

.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; 
 
}

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

示例代码可以在这里找到：http://jsfiddle.net/kongakong/6Lrfwt7m/3/

的结果是这样的：

来源

2015-09-13 Anthony Kong

在你拨弄你的<div style="container">代替<div class="container">

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

来源

2015-09-13 19:02:10 Rash

我想知道为什么'容器'类没有工作。感谢您指出了这一点！ –

@AnthonyKong没问题......小错误是最糟糕的！ – Rash

快速跟进：我切换到使用余裕，但名牌正在触摸圆圈。我怎样才能在这两个元素之间保持一个小小的差距？ –

它是左对齐，你就必须大填充使它看起来不是。删除padding-left:75px;并解决您的问题。

来源

2015-09-13 18:59:50 jaunt

快速跟进：我切换使用'margin-left'，但'name-tag'正在触摸圆圈。我怎样才能在这两个元素之间保持一个小小的差距？ –

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

如果您删除填充，您可以看到该功能正常工作。检查此琴：

.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/

来源

2015-09-13 19:03:39 cesare

添加CSS盒的选型固定在填充宽度。

.name-tag { 

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

}

来源

2015-09-14 06:11:47

为什么“text-align：left;”在这里不行？

回答

相关问题