Left justify centered text in tds

Question

I have a report that's displayed in a table, the text inside tds must be centered but left justified, how can I accomplish that ?

<td style="text-align: center;"><?=$row['column']?></td>

Are you try to achieve this? http://stackoverflow.com/questions/8702802/how-can-i-centre-left-aligned-text-even-when-it-wraps — Scott, Feb 03 '13 at 12:36
I'm limited to using tables, so divs only wont work for me, thanks anyway — Digital fortress, Feb 03 '13 at 12:40
@DavidThomas He means the text block being centered and the text inside left-justified. — Antony, Feb 03 '13 at 12:54
@Digitalfortress Can you use divs inside tables? If so you can center the div and keep the inner text left-justified. — Antony, Feb 03 '13 at 12:57
@Antony Yea you got me right, do you mean I put on td align=left then contain text inside divs and put align=center on div ? — Digital fortress, Feb 03 '13 at 13:10

score 0 · Answer 1 · answered Feb 03 '13 at 13:02

0

If you're unable to modify the mark-up, the only option I can suggest is to use padding:

 td {
    width: 7em;
    padding: 0 1em;
    border: 1px solid #000;
 }

JS Fiddle demo.

This will place the text 1em away from the left and right boundaries of the cell, but retain left-justification within those boundaries.

Remember that padding will be added to the width of the cell, though, so with the above the dimensions of the cell will be width + padding-left + padding-right + border-left + border-right, so: (7em + 1em + 1em + 1px + 1px). To contain the padding and borders within the defined width you can use box-sizing in compliant browsers:

 td {
    width: 7em;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 1em;
    border: 1px solid #000;
 }

JS Fiddle demo.

answered Feb 03 '13 at 13:02

David Thomas

249,100
51
377
410

This is a good way of achieving it, but if the table width is 100%, and it expands with screen resolution, the text wont be centered inside tables, right ? – Digital fortress Feb 03 '13 at 13:11
I dont know the table width, it's set to 100%, so everytime the screen size changes, table width would change, I need to make sure its always centered – Digital fortress Feb 03 '13 at 13:20
This will be centered within the cell. If there are constraints on your table, or the cells, please add that to the question. And explain clearly, show images if they'll help. As it is, I don't understand what you're asking in your comment: the size of the `table` has nothing to do with the centering of the text in the `td`. It might not be legible if the cells are too small, but the browser will still do its best to position it appropriately within the constraints of the CSS. – David Thomas Feb 03 '13 at 13:25

Antony · Accepted Answer · 2013-02-03T14:51:16.447

0

You can contain the text in a div and center it in the td like this:

HTML

<td><div class="inner">left justified text in a centered block</div></td>

CSS

.inner {
    width: 20%;
    display: table;
    margin: 0 auto;
}

JSFiddle Demo

You don't have to specify align=left in the div. It is aligned left by default.

edited Feb 03 '13 at 14:51

answered Feb 03 '13 at 14:46

Antony

14,900
10
46
74

Left justify centered text in tds

2 Answers2