Menu
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; } jsFiddle
I also tried to set text-align:center !important; but doesn't work. What did I do wrong?
999
The most preferred way to center Font Awesome Icons is to assign a center class to each <i> tag. Setting width to 100%, let's each icon cover 100% area horizontally. Also text-align then centers the icon accordingly to the width being used.
If you want to make a text appear vertically aligned next to a Font Awesome icon, you can use the CSS vertical-align property set to “middle” and also, specify the line-height property. Change the size of the icon with the font-size property.
Add your own flavour of the font awesome style
[class^="icon-"], [class*=" icon-"] { display: inline-block; width: 100%; } which along with your
td i { text-align:center; } should center just the icons.
193
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; } http://jsfiddle.net/kB6Ju/2/
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
