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

Answer 1

マークアップを変更できない場合、私が提案できる唯一のオプションは、次を使用することですpadding。

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

JS フィドルのデモ。

これにより、テキスト1emはセルの左右の境界から離れて配置されますが、それらの境界内で左揃えが維持されます。

ただし、セルの にパディングが追加されることに注意してください。したがって、上記の場合、セルの寸法は+ + + +になるため、( ) になります。およびを定義内に含めるには、準拠ブラウザで使用できます。widthwidthpadding-leftpadding-rightborder-leftborder-right7em + 1em + 1em + 1px + 1pxpaddingborderwidthbox-sizing

 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 フィドルのデモ。

Answer 2

テキストを a に含めて、次のようdivに中央に配置できます。td

HTML

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

CSS

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

JSFiddleデモ

align=leftdiv で指定する必要はありません。デフォルトでは左揃えです。