0

I am having issues centering a div class in the footer of my WordPress website (using a CPO theme).

I want to call the variable I created in HTML and format it using the additional CSS in the theme of my WordPress site.

After creating div class example I want to use auto margins to center the logo using CSS

#example {
  margin-left: auto ;
  margin-right: auto ;
}
<div class="example">     
  <div class="ctwg-social">
    <a class="ctwg-social-link ctwg-social-facebook" href="https://www.facebook.com/example" title="Facebook"><span class="ctwg-social-icon"></span></a>
  </div>
</div>

I've also tried calling <class id="example"> but that didnt work either.

E_net4
  • 27,810
  • 13
  • 101
  • 139
blau
  • 73
  • 3
  • 13
  • this sounds like a [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) issue? that or maybe related to a deeper dive into centering: https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div – worc Feb 07 '19 at 20:05
  • setting the left and right margins to auto will cause the div to center itself but it will still be 100% width so there will be no apparent difference. try also giving it a `max-width` property of say 60% – andrew Feb 07 '19 at 20:14
  • @andrew thank you Andrew, this worked for me! – blau Feb 07 '19 at 20:17
  • Since you're trying to center inline elements (anchors and spans) `.ctwg-social {text-align: center}` is probably the best method – andrew Feb 07 '19 at 20:18

2 Answers2

0

To center an image: make it into block of its own and apply the margin properties to it. Add this to your css:

  display: block;
Chao1920
  • 155
  • 1
  • 8
0

playing with the max-width: #%; worked for me, thank you for the answer Andrew!

blau
  • 73
  • 3
  • 13
  • no problem, see my second comment above, its probably a better way – andrew Feb 07 '19 at 20:20
  • this actually did not work as it cannot be completely centered, only close and after 100% it doesn't seem to do anything – blau Feb 07 '19 at 20:24
  • text align also didn't work, its slightly to the left (the icons) of center of the page – blau Feb 07 '19 at 20:25
  • maybe there is a margin on the other items which offsets it, you could also use `transform: translate(-50%,-50%)` to move it around. (play with the %values to position them horizontally and vertically) – andrew Feb 07 '19 at 20:27
  • I solved the solution temporarily by using both, but its still slightly off center to the left using max-width: 41%... If i use 40% one of the icons I am trying to use (3 total) will drop down to the line below – blau Feb 07 '19 at 20:28
  • try playing with transform translate as mentioned above – andrew Feb 07 '19 at 20:29