I have a table with a Font Awesome icon and I want to align text left and center icons.
I tried with centering <i>
but doesn't work:
HTML:
<td><i class="icon-ok"></i></td>
CSS:
td, th {
text-align: left;
}
td i {
text-align:center;
}
I also tried to set text-align:center !important;
but doesn't work. What did I do wrong?
This question is related to
css
font-awesome
i solved my problem with this:
<div class="d-flex justify-content-center"></div>
im using bootstrap with font awesome icons.
if you want to know more acess the link below: https://getbootstrap.com/docs/4.0/utilities/flex/
Since you don't want to add a class to cells containing an icon, how about this...
Wrap the contents of each non-icon td
in a span
:
<td><span>consectetur</span></td>
<td><span>adipiscing</span></td>
<td><span>elit</span></td>
And use this CSS:
td {
text-align: center;
}
td span {
text-align: left;
display: block;
}
I wouldn't normally post an answer in this situation, but this seems too long for a comment.
OP you can use attribute selectors to get the result you desire. Here is the extra code you add
tr td i[class*="icon"] {
display: block;
height: 100%;
width: 100%;
margin: auto;
}
Here is the updated jsFiddle http://jsfiddle.net/kB6Ju/5/
If your icons are in an icon stack you can use the following code:
.icon-stack{ margin: auto; display: block; }
Use text-align: center;
on the block container of the icon (the <td>
) - text-align doesn't apply to inline elements, only block containers:
td {
text-align: center;
}
Give a class to your cell containing the icon
<td class="icon"><i class="icon-ok"></i></td>
and then
.icon{
text-align: center;
}
It's a really old topic but as it still comes up top in search results:
Nowadays you can add additional class fa-fw
to set it fixed width.
Example:
<i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
Source: Stackoverflow.com