css - 使用 CSS 网格居中的 Paypal 按钮

Question

问题

我可以在桌面上将我的按钮居中，但在移动设备上有问题。我应该如何修改我的代码？

背景

我花了很多时间将 paypal 按钮放在 website 上我 build 了。它在电脑屏幕上很好，但在移动屏幕上它会向右浮动并溢出视口(viewport)。我最终通过将 grid-template-column: 100% 更改为 grid-template-column: 5% 95% 来修复它。

CSS

 .paypal {
position: relative;
grid-column: 2/3;
grid-row: 2/3;
margin: 0 auto;
}

.subscription,
#content > div.coach-grid-4 > div.second-p2 > span > form > 
input[type="image"]:nth-child(3) {
grid-column: 2/3;
grid-row: 6/7;
margin: 0 auto;
}

HTML

<div class="second-p2">


 <div class="paypal" id="paypal-button"></div> //Paypal Button

 <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_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">

</div>

我想知道是否有人可以解释为什么这行得通而另一种方法却行不通。或者有没有更好的解决办法。我正在努力获得更好的理解。谢谢。

Answer 1

当给定 grid-template-columns: 100% 时，您必须将 grid-column 更改为 1 而不是 2/3 .. grid-column: 2/3 并选择了第二列，但第一列的大小相同 这里是手机上出现的问题，第一列和第二列相似，大小相同，比手机屏幕大