Menu
Recently, i started working on a project that contains a table with some fields, and I want to add some Material Design Icons trough MaterializeCSS on the side of the icons. Look at the image and you might get it
:
I tried everything, vertical align, inline(-block), flex, and everything I could find in stack overflow. So no, it's not a duplicate, I really need help. Thank you.
806
First, give a custom class to the icon you want to center. Then, add a bottom vertical align and a font-size that matches or is smaller than the text it is placed next to. Also, don't specify icon size in the icon classname. Let me know if this works for you.
You can center the button using materialize class center-align, but use it on <p> or <div> tag. since <a> tag is inline-block tag.
use margin-top, margin-bottom to align the box at center.
Material icons are also available as regular images, both in PNG and SVG formats.
I had the same issue for the longest time but found a solution that worked for me. First, give a custom class to the icon you want to center. Then, add a bottom vertical align and a font-size that matches or is smaller than the text it is placed next to. Also, don't specify icon size in the icon classname. Let me know if this works for you.
CSS:
.inline-icon { vertical-align: bottom; font-size: 18px !important; } HTML:
<p>"Your text goes here"<i class="inline-icon material-icons">warning</i></p> 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
