在 php 电子邮件中居中图像的问题答案

【问题标题】：Issues centering images within a php email在 php 电子邮件中居中图像的问题
【发布时间】：2016-04-03 16:39:45
【问题描述】：

我正在尝试使用内联样式在 php 电子邮件中将图标图像居中，但无论我做什么，我都无法将它们水平居中在 closing-email-section-container 内。

我尝试将 text-center 和 margin: 0 auto;` 添加到每个图标的跨度和它们的父级。都没有奏效。填充也是如此，不会占用任何东西。

我做错了什么？

    <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>

【问题讨论】：

我不知道这是否是您的问题的原因，您的 style 属性值之一缺少右引号。
@SteveJorgensen 谢谢，错过了。问题依然存在，谢谢尝试。

标签： php html css email

【解决方案1】：

我认为应该使用 style: block 而不是 inline block

如下代码：

  <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>

【讨论】：

你知道为什么填充不能用来分隔图像吗？
如果你在 style 属性中添加它应该可以工作 >> 像：style="padding:50px;"
我知道为什么它对我不起作用。我正在尝试使用auto 就像padding: auto 10px; ...感谢您的帮助！