在一个表格单元格中，使画布元素居中而不是它的同级元素。

Question

I have this HTML code:

<tbody>
     <tr>
         <td>
             <canvas class="myid_templates_editor_canvas"></canvas>
             <div>A lot of codes here</div>
             <div>A lot of codes here</div>
         </td>
     </tr>
<tbody>

我希望将canvas居中，但不影响td的其他子元素。所以我尝试了下面的CSS：

td {
    text-align:center;
}

但这段代码会影响到其他元素，比如 <div>。我尝试了以下代码：

td > canvas {
    text-align:center;
}

上述代码不能将我的画布元素居中，我该怎么办？

- user4621642

Answer 1

设置一个固定的 width，然后使用 margin: auto，同时加上 display: block。使用 text-align: center 将会使内容居中。

canvas.myid_templates_editor_canvas {
    width: 200px;
    margin: auto;
    display: block;
}

jsFiddle

- Pedram

Answer 2

尝试一下这个：

td {
 text-align:center; 
}

td div {
 text-align:left;
}

table {
 width: 100%;
}

- Violelune