Home / Questions / 31403
Accepted
Emiliano Torres
Asked: 2020-11-03 12:43:35 +0800 CST 2020-11-03 12:43:35 +0800 CST

td 列中带有图像的中心跨度

  • 772

如何<span class="glyphicon"></span>在<td>表格中居中？将它们放在主题上有点麻烦……我正在使用 Laravel 5.2 和 jquery 的 DataTable。它是一个给我值 1 或 0 的列，我在我的 javascript 中，如果它的值是 1 或者如果它的值是 0，则将其替换为 gliphicon 以获得我正在附加的图像。问题是我希望它居中（活动列）：

在此处输入图像描述

jquery

3 Answers

  1. 由于 aspan是一个元素inline，您可以使用text-align: center该元素在列中居中。

    例子： 

    td{
  width: 300px;
  background-color: green;
  text-align: center;
}
    <table>
  <tr>
  <td><span>Esto es una prueba</span></td>
  </tr>
</table>

    正如@rnd 告诉你的那样，直接从元素中使用选择器将为页面上所有该类型的元素更改它。我只是把它作为一个简单的例子，所以你可以看到它可以使用text-align: center. 如果表是静态的，您可以使用一个类。

    由于在您的情况下该表是动态创建的，因此您可以通过选择器nth-child(3)使用tr > td:nth-child(3). 这告诉它获取td位置为 3 的元素，该元素是 a 的子元素tr。

    例子：

    td{
    width: 100px;
    background-color: green;
}

tr > td:nth-child(3){
   text-align: center;
}
    <table>
  <tr>
    <td><span>Esto es una prueba</span></td>
    <td><span>Esto es una prueba</span></td>
    <td><span>Esto es una prueba</span></td>
  </tr>
  <tr>
    <td><span>Esto es una prueba</span></td>
    <td><span>Esto es una prueba</span></td>
    <td><span>Esto es una prueba</span></td>
  </tr>
  <tr>
    <td><span>Esto es una prueba</span></td>
    <td><span>Esto es una prueba</span></td>
    <td><span>Esto es una prueba</span></td>
  </tr>
</table>

    • 4
  2. Best Answer

    创建表时，使用该选项columns可以将类添加到所有td特定列中className。Datatables 带有用于对齐单元格的类，如果您使用它们的样式，您可以使用该类dt-center或使用引导类text-center：：

    var table = $('#lotes-establecimiento').DataTable({
  "columns": [{
    "data": "lote"
  }, {
    "data": "tipo"    
  }, {
    "data": "activo"
    "className": "text-center"
  },{
    "data":"descripcion"
  }]
});
    • 3

  3. 由于您使用的是 Bootstrap，因此无需添加任何额外的 CSS。

    将类添加.text-center到容器中，如本示例的第二行所示。

    萨鲁2

    @import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
    <table class="table table-bordered">
  <tr>
  <td><span class="glyphicon glyphicon-ok"></span></td>
  </tr>
  <tr>
  <td class="text-center"><span class="glyphicon glyphicon-ok"></span></td>
  </tr>
</table>

    • 0