Centering icon row

I'm trying to center the four icons in a front page module without using the <center> tag. See image.
Using <center>....</center> works fine but I'd like to use CSS.

The code in the custom HTML module looks like this:

Code: Select all

<ul class="soc">
<li style="text-align: center;"><a href="https://twitter.com/xxxxx" class="soc-twitter"></a></li>
<li style="text-align: center;"><a href="https://www.facebook.com/pages/xxxxx" class="soc-facebook"></a></li>
<li style="text-align: center;"><a href="https://plus.google.com/xxxxx/posts" class="soc-google"></a></li>
<li style="text-align: center;"><a href="https://www.linkedin.com/company/xxxxx" class="soc-linkedin soc-icon-last"></a></li>
</ul>

I've tried different CSS in the css.override file but can't get it to work and center the row of icons. Suggestions?

Could you please post an url to your site?

https://www.chadzworld.com/cw is site URL.

Please edit: /templates/gk_news2/css/override.css and add at its end:

Code: Select all

#gkSidebarRight ul.soc {text-align:center;}


Remember to enable "CSS override" in template settings - advanced section.

That worked -thanks
Great support as usual!

Is there anything else I can help you with regarding this topic?