我已经在css类text-align: left;
中使用了name-tag
,但是该名称仍然与div的右侧对齐。为什么?
.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/
结果是这样的:
最佳答案
在您的小提琴中,您使用的是<div style="container">
而不是<div class="container">
然后,您有75px
的填充,因此它并不完全在左侧。