Значок моего логотипа в моей подписи электронной почты летит в крайнем правом углу веб-браузера, но я хочу, чтобы его позиция была точной

Question

У меня есть подпись электронной почты с одним значком, который, кажется, вылетает в правую часть экрана при открытии в некоторых веб-браузерах. Я хочу выбрать его точное положение.

Это работает для меня, но не в веб-браузере других лиц

<table border="0" cellpadding="0" cellspacing="0" width="500">
  <tbody>
    <tr>
      <td height="64" style="font-family:Arial,Helvetica, sans-serif; 
               font-size:18px; font-style:bold;">
        <strong>Oliver Loweth</strong>
        <br>
        <em style="font-size:17px; font-weight:400;">Senior Partner</em>
      </td>
      <td border="0" cellpadding="0" cellspacing="0" height="35" width="200" vertical-align="center">
        <a href="https://www.technicalalliance.com.au/"><img src="http://d4625.mysite.westnethosting.com.au/Images/ta_logo_gold.png" alt="link to Technical Alliance website" border="0" /></a>
      </td>
    </tr>

Нет сообщений об ошибках - просто этот значок (ta_logo_gold.png) в некоторых браузерах отображается справа от экрана, но я хочу, чтобы он оставался в горизонтальном положении - на определенном расстоянии слева.

Answer 1

Выравнивание

Во-первых, vertical-align это не атрибут HTML, это свойство CSS. Для выравнивания по вертикали на столе вы можете использовать valign примерно так.

<td border="0" cellpadding="0" cellspacing="0" height="35" width="200" valign="center">

Вы также можете добавить align к своему контейнеру и установить его как левый, так что значок всегда будет сдвигаться влево.

<td border="0" cellpadding="0" cellspacing="0" height="35" width="200" valign="center" align="left">

Почему бы не использовать float или position?

Обычно вы можете использовать их, чтобы получить то, что вам нужно, но так как вы работаете над электронной почтой, всегда полезно проверить поддержку CSS для свойств, которые вы вызываете, так как многие клиенты не поддерживают некоторые общие свойства, такие как position как видно на CampaignMonitor .

Answer 2

Не используйте vertical-align в качестве атрибута td. vertical-align является свойством CSS, а не атрибутом HTML. Кроме того, поскольку вы отправляете электронное письмо, нам нужно сохранять его простым и чистым HTML, а некоторые свойства CSS могут поддерживаться не всеми клиентами. Теперь вам нужно добавить два атрибута для достижения вашей цели. Атрибут valign определяет вертикальное выравнивание содержимого в ячейке, и это его синтаксис:

<td valign="top|middle|bottom|baseline">

Наконец, чтобы выровнять ваш значок по левому краю, мы будем использовать атрибут align. Это определяет горизонтальное выравнивание содержимого в ячейке, и это является его синтаксисом:

<td align="left|right|center|justify|char">

Здесь вы можете увидеть, как это работает:

<table border="0" cellpadding="0" cellspacing="0" width="500">
  <tbody>
    <tr>
      <td height="64" style="font-family:Arial,Helvetica, sans-serif; 
               font-size:18px; font-style:bold;">
        <strong>Oliver Loweth</strong>
        <br>
        <em style="font-size:17px; font-weight:400;">Senior Partner Left</em>
      </td>
      <td border="0" cellpadding="0" cellspacing="0" height="35" width="200" valign="center" align="left">
        <a href="https://www.technicalalliance.com.au/"><img src="https://i.imgur.com/bF9SfLM.png" alt="link to Technical Alliance website" border="0" /></a>
      </td>
    </tr>
    <tr>
      <td height="64" style="font-family:Arial,Helvetica, sans-serif; 
               font-size:18px; font-style:bold;">
        <strong>Oliver Loweth</strong>
        <br>
        <em style="font-size:17px; font-weight:400;">Senior Partner Right</em>
      </td>
      <td border="0" cellpadding="0" cellspacing="0" height="35" width="200" valign="center" align="right">
        <a href="https://www.technicalalliance.com.au/"><img src="https://i.imgur.com/bF9SfLM.png" alt="link to Technical Alliance website" border="0" /></a>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

вам, вероятно, нужно использовать свойство float в <style> и установить его влево.

<style>
    img {
        float: left;
    }
</style>

это должно остановить отправление логотипа вправо. Если это не сработает, попробуйте использовать position:absolute и установить top и left в нужное вам положение.