按鈕行高度問題上的Outlook

雖然它應該正確顯示在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>

它應該如何看（以及如何找上的郵件，例如）：

如何它看起來在展望：

我嘗試將高度和行高值更改爲ems或％而不是像素，並添加mso-line-height-rule:exactly屬性，將行高添加到td而不是a標記......沒有運氣！

來源

2015-09-01 ithil

你試圖使用'height'財產？ – vivekkupadhyay

@vivekkupadhyay我使用它作爲vlm版本的按鈕，你可以檢查我提供的代碼示例...那是什麼意思？ – ithil

嘗試使用一個簡單的''具有所有必要的屬性和'高度'可能會工作，這通常在我的情況下通常工作。 – vivekkupadhyay

根據W3School的說明，align屬性定義了單元格中內容的水平而非垂直對齊。

W3Schools的規定，在一個小區中的內容的垂直取向可以使用valign屬性

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

或者，也可以使用定義爲內嵌式垂直的vertical-align的CSS屬性在中心的元素來定義其父容器。

根據您定位的郵件客戶端，您可能需要使用上述方法中的一種或另外兩種。它支付檢查哪些郵件客戶端支持哪些元素，有大量的在線參考，heres one，你可能會找到更好的。

來源

2015-09-01 08:51:15

這是最接近的，我可以通過電子郵件中的VML來使Outlook收聽。它不是完美的垂直中心，但很接近。

我更改了VML，以便在VML內的roundrect標記內包含按鈕的文本和鏈接，而不是使用兩個標記。這允許與Outlook更好的兼容性，因爲它使用VML（微軟語言）而不是HTML，它需要Word重寫/翻譯它。這與幾個小小的調整（例如設置一個定義的寬度）相結合產生了最接近我可以得到的垂直對齊。 VML提供了許多風格和其他選項，但並非全部都轉換爲電子郵件/展望，因此，如果您研究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>

來源

2015-09-02 19:29:33 Gortonington

可以請你解釋一下你從原始代碼中改變了什麼，所以答案更完整 – ithil

mso-text-raise風格將幫助你實現正確的垂直對齊

來源

2017-09-29 01:24:54 Aleko

按鈕行高度問題上的Outlook

回答

相關問題