Why "text-align: left;" does not work here?

Question

I have used text-align: left; in the css class name-tag but somehow the name is still aligned to the right hand side of the div. Why?

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

Sample code can be found here: http://jsfiddle.net/kongakong/6Lrfwt7m/3/

The outcome is this:

score 2 · Answer 1 · answered Sep 13 '15 at 18:59

2

It is aligned to the left, you just have large padding to make it seem like it's not. Remove padding-left:75px; and your problem is fixed.

answered Sep 13 '15 at 18:59

jaunt

4,978
4
33
54

A quick follow-up: I switch to use `margin-left` but `name-tag` is touching the circle. How can I keep a small gap between these two elements? – Anthony Kong Sep 13 '15 at 19:09

score 2 · Accepted Answer · answered Sep 13 '15 at 19:02

2

In your fiddle you have <div style="container"> instead of <div class="container">

Then you have padding of 75px so its not totally on the left.

answered Sep 13 '15 at 19:02

Rash

7,677
1
53
74

I was wondering why `container` class did not work. Thanks for pointing this out! – Anthony Kong Sep 13 '15 at 19:06
@AnthonyKong No problem...small mistakes are the worst! – Rash Sep 13 '15 at 19:07
A quick follow-up: I switch to use margin-left but name-tag is touching the circle. How can I keep a small gap between these two elements? – Anthony Kong Sep 13 '15 at 19:13
@AnthonyKong That is because in table-cell the margin won't work. See this question http://stackoverflow.com/questions/16398823/why-is-a-div-with-display-table-cell-not-affected-by-margin – Rash Sep 13 '15 at 19:16

score 1 · Answer 3 · answered Sep 13 '15 at 19:03

the problem is that there is padding on left and so the cell seems aligned at right.

if you remove the padding you can see that is working correctly. Check this fiddle:

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

score 0 · Answer 4 · answered Sep 14 '15 at 06:11

0

Add CSS Box Sizing for width fixed in padding.

.name-tag {

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

}

answered Sep 14 '15 at 06:11

Manish Salunke

63
1
10

Why "text-align: left;" does not work here?

4 Answers4