How to get the icon centered in a Feature Grid with three column view

Hi everyone,

I cant find anywhere a code that will make the icons centered in this block

Tks a lot for any help.

Hi @tsallis23 could you please, share the link to your published page where you have that block added? We can then provide a custom code to achieve the desired result

www.innovaction.com.br

Hay @tsallis23, as @Maria promised, sharing the custom code :star_struck:. Just paste this code to your page settings → Custom code → Footer section, save and preview…

<style>
#feature-grid4 img {
    display: flex!important;
    justify-content: center;
}
</style>

Please note that if you replace the images with icons in your block, this code will not work and you need to try this one instead

<style>
#feature-grid4 i {
    display: flex!important;
    margin: auto;
}
</style>

I tried both without success

maybe you can help here @matthieu_chateau

Mmmmmm, your block is named #feature-grid4?
This code does work

If you are not using icons => img as told by Astghik

1 Like

This is the code I should be using if I had Icons, right?

#feature-grid4 img {
display: flex!important;
justify-content: center;
}

This is the code you need to use:

#feature-grid4 img {
    display: flex!important;
    margin: auto;
}

(I checked your website). What you have are images, not icons stricto sensu.
There was a little error with justify-center I think.

2 Likes

Thank you very much Matthieu, whenever in Rio de Janeiro, the “Caipirinhas” are on me :slight_smile:

I lived in Curitiba and Floripa some time ago :wink:. I would prefer a “Churrasco on me” ahahaha (kidding)

You got it! Hope to see you soon and tks a lot again!

Where would be a good source to learn this lo code we have been showing me?

One website: https://www.w3schools.com/

And two books:

Responsive Web Design with HTML5 and CSS by Ben Frain

JavaScript from Beginner to Professional By Laurence Lars Svekis

Tks a lot for your great support