Icon not centering within services section card on homepage.

[spimpton]

For the "Gatherings, Coaching & Resources" services section on this homepage, I am trying to center the image/icon and text within the card, and have successfully used custom css to center align the text, but nothing I do will change the alignment of the image. 

The current custom css (with everything left aligned) for the section is:

img {
height: 100px;
}
.services .btn:focus,
.services .btn:hover {
background: #4d4d4e;
border-color: #4d4d4e;
}

Adding the following code works to center the text within each card, but nothing I have tried for the image works:

.services {
text-align: center;
}

Any thoughts? Thank you!

[niraj_patel]

Hello @spimpton 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  div.services__item img {
      margin: 0 auto !important;
   }
  div.services__item {
   text-align: center !important;
 }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[websensepro]

Hello @spimpton ,

Can you please share store URL,

Thanks!