Кнопка на перспективы

Question

Я сделал кнопку для информационного бюллетеня, используя http://buttons.cm/

Хотя предполагается, что для правильного отображения на Outlook, текст не выровнены по вертикали, но вместо того, чтобы немного выравнивается по нижней части. Исходный код

Баттона:

<td align="center" width="70%">  
<div><!--[if mso]> 
     <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="52%" stroke="f" fillcolor="#0072b9"> 
     <w:anchorlock/> 
     <center> 
     <![endif]--> 
      <a href="http://" 
    style="background-color:#0072b9;border-radius:26px;color:#ffffff;display:inline-block;font-family:Verdana,sans-serif;font-size:20px;font-weight:normal;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Leer más</a> 
     <!--[if mso]> 
     </center> 
     </v:roundrect> 
    <![endif]--></div> 
</td> 

Как это должно выглядеть (и как смотрит на почту, например):

Как это выглядит на Outlook:

Я попытался изменить значения высоты и высоты строки на ems или% вместо пикселей, добавив свойство mso-line-height-rule:exactly, добавив высоту линии к td вместо метки a ... не повезло!

Answer 1

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

W3Schools указывает, что вертикальное выравнивание содержимого в ячейке может быть определена с помощью valign атрибут

<td align="center" valign="middle" width="70%"> 

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

Возможно, вам понадобится использовать тот или иной метод, указанный выше, в зависимости от почтового клиента (ов), на который вы нацеливаетесь. Платит, чтобы проверить, какие почтовые клиенты поддерживают какие элементы, есть множество ссылок в Интернете, heres one, возможно, вы сможете найти их лучше.

Answer 2

Это самое близкое, что я могу получить через VML в электронном письме, чтобы прослушать Outlook. Это не совсем вертикальный центр, но он близок.

Я изменил VML, чтобы включить текст и ссылку на кнопку внутри тега roundrect внутри VML вместо того, чтобы использовать тег для обоих. Это позволяет улучшить совместимость с Outlook, потому что вместо HTML используется VML (язык Microsoft), который требует, чтобы Word переписывал/переводил его. Это в сочетании с небольшими небольшими настройками (например, заданием определенной ширины) создало наиболее близкое к вертикальному выравниванию, которое я мог получить. VML предлагает множество стилей и других опций, но не все они переходят в электронную почту/Outlook, поэтому имейте это в виду, если вы исследуете VML. :

<td align="center" width="70%">  
<div><!--[if mso]> 
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="52%" stroke="f" fill="t"> 
    <v:fill type="tile" color="#0072b9" /> 
    <w:anchorlock/> 
    <center style="text-align:center; color:#FFFFFF; font-family: Verdana,sans-serif; font-size:20px; font-weight:normal;">Leer más</center> 
    </v:roundrect> 
     <![endif]--> 
      <a href="http://" 
    style="background-color:#0072b9;border-radius:26px;color:#ffffff;display:inline-block;font-family:Verdana,sans-serif;font-size:20px;font-weight:normal;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none; mso-hide:all;">Leer más</a> 
</div> 
</td> 

Answer 3

mso-text-raise стиль поможет вам достичь правильного вертикального выровнять