在php电子邮件中以图片为中心的问题

Question

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>

Answer 1

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>