如何使这个贝宝按钮居中并变大答案

【问题标题】：How do I make this paypal button centered and bigger如何使这个贝宝按钮居中并变大
【发布时间】：2019-03-18 17:05:49
【问题描述】：

我正在做一个项目，想知道如何使我的 paypal 按钮的“立即购买”部分直接位于按钮的“门票数量”部分下方（反之亦然，“门票数量” ”直接在“立即购买”上）。如您所见，它已关闭，我已经尝试了所有我能想到的让它看起来正确的方法，但没有成功。还有，能不能把整个表格做大一点？

如果你能帮忙，请告诉我，

谢谢

PayPal Button

代码：

<form method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="9QRP36HGU9DP6">
<table>
<tr><td><input type="hidden" name="on0" value="Number of Tickets">Number of Tickets</td></tr><tr><td><select name="os0">
<option value="1">1 $20.00 USD</option>
<option value="2">2 $40.00 USD</option>
<option value="3">3 $60.00 USD</option>
<option value="4">4 $80.00 USD</option>
<option value="5">5 $100.00 USD</option>
<option value="6">6 $120.00 USD</option>
<option value="7">7 $140.00 USD</option>
<option value="8">8 $160.00 USD</option>
<option value="9">9 $180.00 USD</option>
<option value="10">10 $200.00 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

【问题讨论】：

标签： html paypal

【解决方案1】：

按钮和它下方的卡片指示灯只是一张图片：https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif

您唯一能做的就是裁剪图像以移除其周围的空白并调整其大小以匹配您的设计。

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <form method="post" target="_top" class="center-this-stuff">
    <input type="hidden" name="cmd" value="_s-xclick" />
    <input type="hidden" name="hosted_button_id" value="9QRP36HGU9DP6" />
    <table>
      <tr>
        <td>
          <input type="hidden" name="on0" value="Number of Tickets" />Number of Tickets
        </td>
      </tr>
      <tr>
        <td>
          <select name="os0">
            <option value="1">1 $20.00 USD</option>
            <option value="2">2 $40.00 USD</option>
            <option value="3">3 $60.00 USD</option>
            <option value="4">4 $80.00 USD</option>
            <option value="5">5 $100.00 USD</option>
            <option value="6">6 $120.00 USD</option>
            <option value="7">7 $140.00 USD</option>
            <option value="8">8 $160.00 USD</option>
            <option value="9">9 $180.00 USD</option>
            <option value="10">10 $200.00 USD</option>
          </select>
        </td>
      </tr>
    </table>

    <input type="hidden" name="currency_code" value="USD" />
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
  </form>

  <style>
    .center-this-stuff {
      display: flex;
      align-content: center;
      align-items: center;
      flex-direction: column;
    }
  </style>
</body>

</html>

在这里，我创建了一个类并将其放在父元素上，然后我使用 Flexbox CSS 属性将所有内容居中。

使用 flexbox 在页面周围放置东西

【讨论】：

非常感谢！