Topic: Social Media Icons - CSS Help

[K6GKM]

Hello all,

Trying to get my Social Media Icons lined up neatly in a row in my menubar, centered and evenly distributed, and I have to admit I'm not very up-to-speed with CSS (by not very I mean not at all).

I tinkered with putting each icon in the cell of a table:

Code: [Select]

<!-- Social Media  -->
<p class="sideBarTitle">Social Media</p>
<div style="width:100%; border:none;">
<table style="width:100%">
  <tr>
    <td style="align-items: center;">
      <a href="http://www.facebook.com/CamarilloWX/" target="_blank" title="Like CamWX on Facebook"><img src="/other-img/facebook.png" width="25" height="25" title="Like CamWX on Facebook" alt="Facebook"/></a>
    </td>
    <td style="align-items: center;">
      <a href="https://www.instagram.com/camwx1/" target="_blank" title="Follow CamWX on Instagram"><img src="/other-img/Instagram_Glyph_Gradient.png" width="25" height="25" title="Follow CamWX on Instagram" alt="Instagram"/></a>
    </td>
    <td style="align-items: center;">
      <a href="https://www.x.com/camwx1/" target="_blank" title="Follow CamWX on X"><img src="/other-img/x-social-media-logo-icon.png" width="25" height="25" title="Follow CamWX on X" alt="X"/></a>
    </td>
  </tr>
</table>
</div>

But I wind up with



The horizontal alignment is right, but the spacing is obviously way off.  I think that may have to do with the inherited sizing of the A tag, but I'd rather use CSS to get the look I want anyway... using a table just seems a bit clunky and old fashioned.

Next I gave this a shot:

Code: [Select]

<!-- Social Media  -->
<p class="sideBarTitle">Social Media</p>
<div style="width:100%; border:none;">
  <div style="width:33%; align-items:center;">
      <a href="http://www.facebook.com/CamarilloWX/" style="width:100%;" target="_blank" title="Like CamWX on Facebook"><img src="/other-img/facebook.png" width="25" height="25" title="Like CamWX on Facebook" alt="Facebook"/></a>
  </div>   
  <div style="width:33%; align-items:center;">
      <a href="https://www.instagram.com/camwx1/" style="width:100%;" target="_blank" title="Follow CamWX on Instagram"><img src="/other-img/Instagram_Glyph_Gradient.png" width="25" height="25" title="Follow CamWX on Instagram" alt="Instagram"/></a>
  </div>   
  <div style="width:33%; align-items:center;">     
      <a href="https://www.x.com/camwx1/" style="width:100%;" target="_blank" title="Follow CamWX on X"><img src="/other-img/x-social-media-logo-icon.png"  width="25" height="25" title="Follow CamWX on X" alt="X"/></a>
  </div>
</div>

But that gives me this:



Stacked instead of in a row. I don't know what would be causing a return, there are no <br/> tags in the code.

I've also played around with the justify-items and align-items CSS properties, but nothing seems to get them centered or even on the same line with each other.

Would someone be able to point me in the right direction to get the look I'm after using CSS?  I'd be super appreciative.

Edit: Work in progress at https://CamWX.com/index_dev.php.