按钮在较小的屏幕上更改位置 - 如何将其居中而不是 "margin-left: 0"？

Question

网站：https://bucksfoodpartnership.org/

所以在我的桌面上，顶部图像上的文字“白金汉郡食品合作伙伴相信每个人都有权享有食物权”和按钮“Get involved" 以 10% 的边距向左对齐。然而，在较小的屏幕上，文本居中（应该如此），但按钮与最左侧对齐。我怎样才能让它也居中（不是所有时候，只有当上面的文本居中时）？

我认为 class 使其左对齐：

.content-caption {
    max-width: 100%;
    left: 0;
    position: relative;
    text-align: center;

但添加

position: relative; 
left: 50%;
transform: translateX(-50%);

或

margin: auto;

确实没有帮助。我是不是找错树了？

Answer 1

您只需将 wp-block-button 设置为 width:100%。

.wp-block-button{
 width:100%;
} 

由于所有继承的样式以及 inline-block 与 text-align:center 的行为方式，这将适合您。甚至跨越你的断点。