インラインスティールを使用してhtml電子メールで水平方向にセンタリングする

インラインスタイルを使用してHTMLメールを作成しています。Outlookで送信して、ブラウザの再フォーマットを回避する最善の方法です。下の2つのリンクを中心にしたいのですが、それはOutlookで動作させるための唯一の方法なので、私は表のセルに入れます。私は、2つのリンクをページの背景とパディングに合わせて表示することを希望しますが、インラインスタイルや表を使用して行う方法はわかりません。誰も助けることができますか？ありがとう！インラインスティールを使用してhtml電子メールで水平方向にセンタリングする

<!DOCTYPE html> 
<html> 
<head> 
    <title>email blast re films</title> 
    </head> 
    <body> 
     <table> 
    <tr> 
     <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> 
      <a href="http://bartonlewisfilm.com/artwork/4258558-wall-cuts-train-stations-New-York-City-excerpt.html" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3D87F5; text-decoration: none; color: white; border-radius: 5px;" title="watch wall cuts, train stations, New York City" target="_blank;">Watch my film "wall cuts, train stations, New York City"</a> 
     </td> 
    </tr> 
    </table> 
    <table> 
    <tr> 
     <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> 
      <a href="http://http://bartonlewisfilm.com/artwork/4264539-red-hook-rush-hour-excerpt.html" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3D87F5; text-decoration: none; color: white; border-radius: 5px;" title="watch red hook, rush hour" target="_blank;">Watch my film "red hook, rush hour"</a> 
     </td> 
    </tr> 
    </table> 
<table> 
    <tr> 
     <td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;"> 
      <a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47; 
    text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home &#40;718&#41; 399-8344 | cell &#40;347&#41; 325-4415 
     </td> 
    </tr> 
    </table> 
    </body> 
</html>

出典

2017-08-31 Barton Lewis

セルのコンテンツを中央に配置する場合は、td {} text-align：center;にスタイルを追加できます。縦方向に整列：中央; – bdalina

はテキストをtdの中に集中させますが、私はページ上にtdを中心にしたいと思います。 –

次にdiv内にテーブルを置いてdiv絶対値を – bdalina

まず、代わりに各セルにpaddingを使用しての、あなただけのtableタグのcellpadding属性を指定することができます -

<table cellpadding="10"> 
    <tr> 
     <td style="background-color: red;"> 
      <a href="address">Link 1</a><br/> 
      <a href="address">Link 2</a> 
     </td> 
    </tr> 
    <tr> 
     <td style="background-color: red;"> 
      <a href="address">Link 1</a><br/> 
      <a href="address">Link 2</a> 
     </td> 
    </tr> 
</table>

<table cellpadding="10">

セルの内容は、デフォルトではセンタリングされますUPD

それに応じて適用する、いずれかの行または列だけを中心へ

<table style="margin: 0 auto;">

- - 穴テーブルは、 0 autoに margin設定

<tr style="width: 50%; margin: 0 auto; display: table;"></tr> 
or 
<td style="width: 50%; margin: 0 auto; display: table;"></td>

出典

2017-08-31 02:38:11 user4447655

各tdのパディングの代わりに機能しました。今私はちょうど（彼らの中のテキストだけでなく）中心にセルを得ることができれば。私は上記の2つのセルより長く実行される方法を示すためにフッターを追加しました。ご意見ありがとうございました。 –

「 – user4447655

」のように、マージンをautoに設定するとテーブル全体を中央に配置できます。テーブル全体を中央に配置したくない場合は、「」または'' - 要素上で' style = "width：50％; margin：0 auto; display：table" – user4447655

tdセルにalign属性を追加します。

<td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> <a href="www.somesite.com">Your link </a> 
    </td>

出典

2017-08-31 02:29:09 teej2542

私はこれを試しましたが、うまくいきませんでした。 alas ... –

bodyタグにマージンを追加すると、それが機能します。

<body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">

出典

2017-08-31 02:37:50 Amit

いいえ、ページセルの中央に浮かんでいる表のセルを、フッターの上に置いて、htmlに追加すると、セルよりもどのように長く見えるのですか？。ボディにマージンを追加すると、コンテナ全体が影響を受けますが、ボディ内部は動きますが、ボディとの関係ではなく本体があります。 –

使用テキスト整列を：中心、垂直整列：中央、

table{width:100%;height:100%;} 
 
td{width:100%;height:100%; text-align:center; vertical-align:middle; font-size: 14px; } 
 
a, a:link, a:visited{padding:10px; display:inline-block; color: white; text-decoration: none;margin:10px; background: #3D87F5; }

<!DOCTYPE html> 
 
     <html> 
 
     <head> 
 
      <title>email blast re films</title> 
 
      </head> 
 
      <body> 
 
      <div id="centerme"> 
 
       <table> 
 
      <tr> 
 
       <td> 
 
        <a href="http://bartonlewisfilm.com/artwork/4258558-wall-cuts-train-stations-New-York-City-excerpt.html" title="watch wall cuts, train stations, New York City" target="_blank;">Watch my film "wall cuts, train stations, New York City"</a> 
 
       <br/> 
 
        <a href="http://http://bartonlewisfilm.com/artwork/4264539-red-hook-rush-hour-excerpt.html" title="watch red hook, rush hour" target="_blank;">Watch my film "red hook, rush hour"</a> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
      </div> 
 
      </body> 
 
     </html>

出典

2017-08-31 02:40:56 bdalina

このhtmlをチェックしてください。私にはうまく表示されます。

<!DOCTYPE html> 
<html> 
<head> 
    <title>email blast re films</title> 
    </head> 
    <body style="height:height:500px;"> 
     <table border="0" style="width:100%; text-align:center;"> 
    <tr> 
     <td > 
      <span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;margin-top:10%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; background: #3D87F5; color: white;"><a href="http://bartonlewisfilm.com/artwork/4258558-wall-cuts-train-stations-New-York-City-excerpt.html" style="padding-right:10px;padding-left:10px; background: #3D87F5; text-decoration: none; color: white; " title="watch wall cuts, train stations, New York City" target="_blank;">Watch my film "wall cuts, train stations, New York City"</a></span> 
      <span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;">&nbsp;</span> 

      <span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"><a href="http://http://bartonlewisfilm.com/artwork/4264539-red-hook-rush-hour-excerpt.html" style="padding-right:10px;padding-left:10px; background: #3D87F5; text-decoration: none; color: white; border-radius: 5px;" title="watch red hook, rush hour" target="_blank;">Watch my film "red hook, rush hour"</a></span> 
      <span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;">&nbsp;</span> 
     </td> 
    </tr> 

    <tr> 
     <td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;"> 
      <a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47; 
    text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home &#40;718&#41; 399-8344 | cell &#40;347&#41; 325-4415 
     </td> 
    </tr> 
    </table> 
    </body> 
</html>

出典

2017-08-31 04:09:38 Amit

インラインスティールを使用してhtml電子メールで水平方向にセンタリングする

答えて

関連する問題