将两个按钮对齐到一行的中心

Question

我有以下代码片段：

<tr>
    <td>
        <a style="text-decoration:none;font-family:Gotham,
                 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#ffffff;
                 background:#d95b23;width:170px;text-align:center;line-height:40px;
                 height:40px;display:block;font-size:15px;" href="%24%7BloginLink%7D">
                 Yes, Integrated</a>
    </td>
    <td>
        <a style="text-decoration:none;font-family:Gotham, 
                 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#ffffff;
                 background:#d95b23;width:170px;text-align:center;line-height:40px;
                 height:40px;display:block;font-size:15px;" href="%24%7BloginLink%7D">
                 No, Yet to Integrate</a>
    </td>
 </tr>

它在一行内作为两个单独的列。两个按钮都在最左边和最右边。如何将它们彼此靠近并居中排列？

我试过添加边距和浮动，但没有成功。

有人可以提供快速帮助吗？

Answer 1

试试这个，刚刚在左侧按钮上添加了 float:left。我还创建了一个带有绿色背景的 table，这样更容易发现

<table style="width:100%;background:green;">
  <tr>
    <td>
      <a style="text-decoration:none;font-family:Gotham,
               'Helvetica Neue', Helvetica, Arial, sans-serif;color:#ffffff;
               background:#d95b23;width:170px;text-align:center;
               line-height:40px;height:40px;display:block;
               font-size:15px;float:right" href="%24%7BloginLink%7D">
         Yes, Integrated</a></td>
    <td>
      <a style="text-decoration:none;font-family:Gotham,
               'Helvetica Neue', Helvetica, Arial, sans-serif;color:#ffffff;
               background:#d95b23;width:170px;text-align:center;
               line-height:40px;height:40px;display:block;
               font-size:15px;" href="%24%7BloginLink%7D">
         No, Yet to Integrate</a></td>
  </tr>

Answer 2

试试这个：

// Add this style for row which has your columns with buttons
tr {
display: flex;
justify content: center;
}

CodePen

Answer 3

这是对您的 JSFiddle

的更新

您需要在跨越包含您的按钮的 2 列的 once 中添加一个 colspan，否则按钮将不知道它们应该是什么大小，并且还会忽略第一个 [=14] 的大小=] 想要成为其上方 <td> 的大小。

<td colspan="2" style="font-family:Arial, Helvetica, sans-serif;font-size:13px;color:#666666;line-height:22px;">
                                    Help us assist you better. Let us know if you’ve successfully completed your payment gateway integration.
                                  </td>

完成后，您需要添加

<td align="center">

如果你想在你的按钮周围添加一点填充，你可以像这样将它添加到 td 上：

<td align="center" style="padding:10px;">

已更新fiddle with padding

Answer 4

您需要将按钮嵌套在另一个 table 中，然后将 table 居中放置在行中。固定宽度的td可以用来调整按钮之间的间距。

<table border="0" cellspacing="0" cellpadding="0" width="100%"> 
<tr>
    <td align="center">
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <a style="text-decoration:none;font-family:Gotham,
                             'Helvetica Neue', Helvetica, Arial, sans-serif;color:#ffffff;
                             background:#d95b23;width:170px;text-align:center;line-height:40px;
                             height:40px;display:block;font-size:15px;" href="%24%7BloginLink%7D">
                             Yes, Integrated</a>
                </td>
                <td width="10"></td>
                <td>
                    <a style="text-decoration:none;font-family:Gotham, 
                             'Helvetica Neue', Helvetica, Arial, sans-serif;color:#ffffff;
                             background:#d95b23;width:170px;text-align:center;line-height:40px;
                             height:40px;display:block;font-size:15px;" href="%24%7BloginLink%7D">
                             No, Yet to Integrate</a>
                </td>
            </tr>
        </table>
    </td>
</tr>

将两个按钮对齐到一行的中心

Aligning two buttons to the center of a row

html

css

html-email