2016-04-03 19 views
0

インラインスタイリングを使用してPHPの電子メール内にアイコン画像を配置しようとしていますが、私は何をしても水平にclosing-email-section-containerの中心に置くことはできません。PHPのメール内で画像をセンタリングする問題

私は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;"> 
 
    \t \t \t <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> 
 
    \t \t \t <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> 
 
    \t \t \t <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> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div>

+0

次のコードのよう代わりに、インラインブロックのブロック

をこれは、あなたの問題の原因です。あなたの 'style'属性値の1つに、閉じ引用符がありません。 –

+0

@ SteveJorgensenありがとう、それを逃した。問題はまだあります、お試しいただきありがとうございます。 – Becky

答えて

1

私はそれがスタイルを使用すべきだと思う:私はしません

<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;> 
 
    \t \t \t <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> 
 
    \t \t \t <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> 
 
    \t \t \t <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> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div>

+0

画像を分割するためにパディングが機能しない理由はありますか? – Becky

+0

スタイル属性>> >>内に追加するとうまくいくはずです:style = "padding:50px;" –

+1

なぜそれが私のために働いていないのか分かります。私は 'auto 'を' padding:auto 10px; 'のように使用しようとしていました...助けてくれてありがとう! – Becky

関連する問題