How can I center a <span class="glyphicon"></span> within a <td> of a table? It's a bit cumbersome to put them in topic ... I'm using Laravel 5.2 and Dataqueable from jquery. It is a column that I get values 1 or 0 and I, in my javascript replacement with a gliphicon if it is value 1 or if it is value 0 to get the image that I attached. The issue is that I would like it to be centered (Active column):
When you create the table, use the columns option to add a class to all td of a specific column with className . Datatables comes with classes to align cells, if you are using their styles you can use the class dt-center or use the class of bootstrap: text-center :
var table = $('#lotes-establecimiento').DataTable({
"columns": [{
"data": "lote"
}, {
"data": "tipo"
}, {
"data": "activo"
"className": "text-center"
},{
"data":"descripcion"
}]
});
Since a span is a inline element, you can use text-align: center to 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 mentioned by @rnd, using the selector directly from the element will be changed for all the elements of that type that you have on your page. I simply put it as a quick example so you could see that it could be centered using the text-align: center property. In case the table was static you could use a class.
As in your case, the table is created dynamically, you can refer to column 3 of each of the rows using the selector nth-child(3) using tr > td:nth-child(3) . This indicates that you take the td element with the 3 position that is the son 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>Since you are using Bootstrap, you do not need to add additional CSS.
Add the class .text-center to 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>