在动态生成的表格中居中输入答案

【问题标题】：Center input in a dynamic generated table在动态生成的表格中居中输入
【发布时间】：2015-11-18 23:34:58
【问题描述】：

我正在构建一个 web 应用程序，但我在输入居中时遇到了一些问题。

This 是 Web 应用程序外观的图片。

这是代码（JS）。

var x = document.getElementById("ddKamers").value;

var table = document.getElementById("table");
var row = table.insertRow();
var cell1 = row.insertCell();
var cell2 = row.insertCell();
var cell3 = row.insertCell();
var cell4 = row.insertCell();
var cell5 = row.insertCell();
var cell6 = row.insertCell();
var cell7 = row.insertCell();

cell1.innerHTML = x;
cell2.innerHTML = "<div class='col-md-6'><input name='stopcontacten[]' class='form-control' type='text'/></div>";
cell3.innerHTML = "<div class='col-md-6'><input name='lichtkringen[]' class='form-control' type='text'/></div>";
cell4.innerHTML = "<div class='col-md-6 center-block'><input name='schakelaars[]' class='form-control' type='text'/></div>";
cell5.innerHTML = "<input type='checkbox' id='cbTV' name='cbTV[]' class='form-control center-block'/>";
cell6.innerHTML = "<input type='checkbox' id='cbInternet' name='cbInternet[]' class='form-control center-block'/>";
cell7.innerHTML = "<button id='buttonDelete' type='button' class='btn btn-default' onclick='deleteRow(this)'><span class='glyphicon glyphicon-remove'></span></button>";

kamerArray.push(x);
document.getElementById('kamers').value = kamerArray;

如果有人知道如何使输入居中，你会帮我很多！由于某种原因，我在 google 上找不到任何东西。

【问题讨论】：

您可以使用非常不推荐使用的 HTML <center> 标签：<center>I am centered!</center>。
CSS - 设置宽度，使用margin: auto; ...这与 PHP 或 Laravel 有什么关系？

标签： javascript php css twitter-bootstrap laravel

【解决方案1】：

要使用 javascript 在表格单元格中居中文本内容，您必须这样做：

cell1.style.textAlign = 'center';

当然，如果内容在 div 中，那么您可能还需要在 div 上设置文本对齐属性，具体取决于您的样式表规则。

Bootstrap 还包含一个名为 text-center 的实用程序类，它将在您应用该类的元素中居中内容。

还有一点，表格单元格具有您也可以设置的align 属性。

【讨论】：

【解决方案2】：

您可以通过这种方式将 div 及其内容居中

<div style = "margin:auto 0px;">
</div>

对于一张桌子，它会是这样的

<td align="center">Text</td>

使用 javascrip 你可以这样做

cell1.style.textAlign = 'center';

并且使用 bootstrap3，您可以将文本中心类用于 div

<div class="text-center">
    </div>

<td class="text-center">
</td>

【讨论】：