I am trying to center icon images within a php email by using inline styling and no matter what I do I cannot get them to center within the closing-email-section-container horizontally.
I have tried adding text-center and margin: 0 auto;` to the span of each icon and the parent to them. Neither worked. The same is with the padding, nothing will take.
What am I doing wrong?
<div id="closing-email-section" style="margin-top: 150px;">
<div id="closing-email-section-container" style="background:#f6f6f6; width: 100%; height: 150px;">
<div id="newsletter-social-media" style="text-align:center; margin-top:10px; font-size: .9em;margin-bottom:15px;">Follow us on Social Media</div>
<div id="newsletter-social-media-icons" style="text-align:center;margin: 15px auto;display:inline-block;">
<span style=" "><a href="http://facebook.com/optimumwebdesigns/ " target="_blank "><img src="http://optimumwebdesigns.com/icons/facebookBlack.png " alt="Facebook " width="45px " height="45px "></a></span>
<span style=" "><a href="https://twitter.com/OptWebDesigns " target="_blank "><img src="http://optimumwebdesigns.com/icons/twitterBlack.png " alt="Twitter " width="45px " height="45px "></a></span>
<span style=" "><a href="http://linkedin.com " target="_blank "><img src="http://optimumwebdesigns.com/icons/linkedInBlack.png " alt="LinkedIn " width="45px " height="45px "></div></a></span>
</div>
</div>
</div></div>
I think it should use style: block instead of inline block
As the following code :
<div id="closing-email-section" style="margin-top: 150px;">
<div id="closing-email-section-container" style="background:#f6f6f6; width: 100%; height: 150px;">
<div id="newsletter-social-media" style="text-align:center; margin-top:10px; font-size: .9em;margin-bottom:15px;">Follow us on Social Media</div>
<div id="newsletter-social-media-icons" style="text-align:center;margin: 15px auto;display:block;>
<span style=" "><a href="http://facebook.com/optimumwebdesigns/ " target="_blank "><img src="http://optimumwebdesigns.com/icons/facebookBlack.png " alt="Facebook " width="45px " height="45px "></a></span>
<span style=" "><a href="https://twitter.com/OptWebDesigns " target="_blank "><img src="http://optimumwebdesigns.com/icons/twitterBlack.png " alt="Twitter " width="45px " height="45px "></a></span>
<span style=" "><a href="http://linkedin.com " target="_blank "><img src="http://optimumwebdesigns.com/icons/linkedInBlack.png " alt="LinkedIn " width="45px " height="45px "></div></a></span>
</div>
</div>
</div></div>