web-dev-qa-db-ja.com

Outlookでのテキストの垂直方向の配置が中央に配置されない[画像付き]

私は現在、ブラウザやGmailで正常に表示されるHTMLメールの問題を解決しようとしていますが、残念ながらOutlookでテキストを垂直方向に揃えるのに問題があります（下部に貼り付いています）。

この画像は、何が問題なのかを示しています。

<td align="center" style="font-size:17px;font-weight:bold;line-height:62px;"><a href="url" style="text-decoration:none;color:#000001;">THE WORLD'S BEST BRANDS</a></td>
</tr>

<tr>
    <td align="center"><a href="url" style="color:#000001;text-decoration:none;"><img src="url" alt="XXXX" width="593" height="100" class="brandsimage" style="display:block;border:0;" /></a></td>
</tr>
</table>                                                
</td>
</tr>

<tr>
    <td align="center" style="font-size:17px;font-weight:bold;line-height:72px;"><a href="url" style="text-decoration:none;color:#000001;">ESSENTIALS</a></td>
</tr>

これを修正する方法はありますか？

htmlcssoutlookhtml-tablehtml-email
7
user2619611

valign="middle"と高さを<td>に追加して、テキストを垂直方向の中央に配置します。

<tr>
  <td align="center" valign="middle" height="100" style="font-size:17px;font-weight:bold;line-height:72px;">
    <a href="url" style="text-decoration:none;color:#000001;">ESSENTIALS</a>
  </td>
</tr>

HTMLメールでは、常に、

valign="top|middle|bottom"垂直方向の配置と

align="left|center|right"水平方向の配置。

同じheight=""要素にwidth=""または<td>を設定する必要があることを覚えておいてください。

11
John