在不使用绝对位置、顶部和左侧的情况下将按钮置于图像中心的替代方法

Posted 2023-03-24

【中文标题】在不使用绝对位置、顶部和左侧的情况下将按钮置于图像中心的替代方法

【英文标题】：Alternative way to centre a button over an image without using position absolute, top and left

【发布时间】：2021-08-25 10:30:50

【问题描述】：

我在 mailchimp 中的自定义模板遇到问题。

我使用顶部和左侧的绝对位置并转换以使按钮在图像上居中。现在，当我预览它时它工作正常，但是当我在 Gmail 上发送测试电子邮件时，当我检查时这些值不存在，这意味着按钮不在中心。

我做了一些研究，但 gmail 不喜欢其中一些属性，如绝对、顶部、左侧、变换等，所以我的问题是，是否有一种解决方法（另一个 css 代码）可以使按钮居中以便它工作在 gmail 上？

下面是代码：

.button-td
background:#FFA06A;
text-align:center;
position:relative !important;


.button-a
background:#FFA06A;
padding:8px 25px;
font-size:16px;
text-decoration:none;
display:block;
position:absolute !important;
text-align:center !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;


<table align="center" border="0" cellpadding="0" cellspacing="0" class="center-on-narrow" role="presentation" style="display:table !important;" mc:edit="imagewithcta">
<tr>
<td class="button-td">
<img src="https://images.unsplash.com/photo-1598257006626-48b0c252070d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1" style="max-width:600px;" >

<a class="button-a" href="*|ARCHIVE3|*">
<span class="button-link">
READ MORE
</span>
</a>
</td>
</tr>
</table>

【问题讨论】：

也许将 a 标签包裹在一个 div 中，然后将图像作为背景图像。给一些固定的高度，然后你可以通过在 div 父级上添加以下样式来对齐按钮： text-align:center

@AristeidisKaravas 我知道设置背景图像会导致 mailchimp 出现问题，它不允许用户更改内容块中的背景图像。我将尝试你的方式，但不将图像设置为背景图像，看看会发生什么

如果按钮不在绝对位置，则无法将按钮置于图像上方...

@AristeidisKaravas - 该死，所以我不能设置背景图片，也不能设置绝对，所以卡住了

【参考方案1】：

html 电子邮件是邪恶的，您会得到一个非常小的 HTML 子集，以便跨电子邮件客户端可靠地使用。背景图像甚至不能在所有内容中得到可靠支持，因此您应该为后备代码编写代码，请参见此处：

https://www.litmus.com/blog/the-ultimate-guide-to-background-images-in-email/

.tablestyle 
  background-image:url('https://images.unsplash.com/photo-1598257006626-48b0c252070d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1');
  width:500px;
  height:300px;
  background-size:cover; 
  background-repeat:no-repeat;


.button-td 
  text-align:center;




.button-a
background:#FFA06A;
padding:8px 25px;
font-size:16px;
text-decoration:none;
display:inline-block;

<table align="center" border="0" cellpadding="0" cellspacing="0" class="center-on-narrow tablestyle" role="presentation"  mc:edit="imagewithcta">
<tr >
<td class="button-td">
<table  >
  <tr>
    <td><a class="button-a">TEST</a></td>
  </tr>
</table>
</td>
</tr>
</table>