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

Center span with image within a td column

  • 772

How can I center a <span class="glyphicon"></span>within <td>a table? It's a bit cumbersome to put them on theme...I'm using Laravel 5.2 and jquery's DataTable. It is a column that gives me values ​​1 or 0 and I, in my javascript, replace it with a glyphicon if it is a value of 1 or if it is a value of 0 to obtain the image that I am attaching. The issue is that I would like it to be centered (Active column):

enter image description here

jquery

3 Answers

  1. Since a spanis an element inline, you can use text-align: centerto center the element within the column.

    Example: 

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

    As @rnd has told you, using the selector directly from the element will change it for all elements of that type you have on your page. I just gave it as a quick example so you could see that it could be centered using the text-align: center. In case the table was static you could use a class.

    Since in your case the table is created dynamically, you can refer to column 3 of each of the rows via the selector nth-child(3)using tr > td:nth-child(3). This tells it to take the element tdwith position 3 that is a child of a tr.

    Example:

    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

    When you create the table use the option columnsto be able to add a class to all tdof a specific column with className. Datatables comes with classes to align cells, if you are using their styles you can use the class dt-centeror use the bootstrap class: text-center:

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

  3. Since you're using Bootstrap, you don't need to add any additional CSS.

    Add the class .text-centerto the container, as in the second row of this example.

    Salu2

    @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