WordPress CSS 中心表

Posted 2023-03-29

【中文标题】WordPress CSS 中心表

【英文标题】：Wordpress CSS Center Table

【发布时间】：2019-05-03 16:47:44

【问题描述】：

我正在尝试在桌面上将我的网站的登录表居中。在移动设备上，它是居中的，出于某种原因在桌面上它不是。我在自定义 CSS 中尝试了宽度和边距自动，但没有奏效。任何意见表示赞赏。

https://grahmlux.com/my-account

【问题讨论】：

请阅读How to Ask。您的问题中需要minimal reproducible example。

【参考方案1】：

我还没有完全弄清楚修复方法，但这不是移动设备与桌面设备的问题 - 该部分中的代码对于两者都是相同的。事实上，如果将桌面窗口的宽度缩小到 980 像素以下，登录字段将居中。当它到达 980px+ 时会发生一些事情，然后将登录字段翻转到左侧。也许字段或其容器上有最大宽度？

解决方案可能是深入研究 woocommerce css 文件。作为一个组合，您可以在登录区域周围创建一个包装器，其 margin: 0 auto 使其保持居中并指定最大宽度，使其不会超过 980 像素。

【参考方案2】：

@media screen and (min-width: 980px) 
.woocommerce .col2-set,
 .woocommerce-page .col2-set 
  width: 45%;
  float: left;

在桌面上，这正在发挥作用。因此您的登录名会向左浮动。取消浮动和边距：自动；

@media screen and (min-width: 980px) 
.woocommerce .col2-set,
 .woocommerce-page .col2-set 
  width: 45%;
  margin:auto;

您需要注意样式不能太通用。因此 - 您可能会更好地针对登录本身。

#customer_login
  margin:auto;
  width: 45%;
  margin:auto;

【讨论】：

我尝试了这两段代码，但奇怪的是，它没有工作。几天前我实际上尝试过同样的事情。目前还没有结果...