0

私が抱えている問題は、下の画像に示されています。左の列のアイコンは、Outlook 2007、2010、および 2013 で垂直方向に正しく配置されていません。line-height/font-size をいじってみましたが、役に立ちませんでした。

使用している構造を説明するために、表のセル/行の境界線を描画しました。各アイコンはpadding-top:5px、右側の列のテキストと正しく整列する必要があります。

これは行のコードです:

<tr>
    <td class="icon" width="59" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1em;color: #666666;padding-top: 5px;margin: 0;"><img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="display: block;border: none;"></td>

    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">1 in 3 Australian SMBs have had their 
    data held to ransom in the last 12 months*.</td>
</tr>

見通しの問題

何か案は？

4

2 に答える 2

0

padding-top が td で機能しない場合は、css を img 自体に適用してみてください。img の css を編集します (以下のコードを参照)。td のパディングトップを取り外します。

<tr>
    <td class="icon" width="59" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1em;color: #666666;"><img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="display: block;border: none;margin-top: 5px;"></td>

    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">1 in 3 Australian SMBs have had their 
data held to ransom in the last 12 months*.</td>
</tr>

img の上マージンを指定してもうまくいかない場合は、パディングまたはボーダートップ (ボーダー幅 5px) と交換してみてください。

于 2013-10-22T02:11:42.670 に答える
0

valign="middle"画像を含む表のセルで使用しないのはなぜですか?

<tr>
  <td class="icon" width="59" valign="middle">
    <img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="margin: 0; border: 0; padding: 0; display: block;">
  </td>
  <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.
  </td>
</tr>

更新: これは、より多くのテキストがある場合の例です。画像は上部に配置されたままになります。

<table width="325" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td class="icon" valign="top" width="59" valign="middle" style="padding-top:5px;">
    <img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="margin: 0; border: 0; padding: 0; display: block;">
  </td>
  <td valign="top" class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.<br>
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.<br>
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.
  </td>
</tr>
</table>
于 2013-10-22T11:59:48.950 に答える