爲什麼「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;」在這裏不行？

回答

相關問題