居中网站内容不起作用？答案

【问题标题】：Centering website content just isnt working?居中网站内容不起作用？
【发布时间】：2014-05-15 16:23:57
【问题描述】：

我正在尝试将所有产品集中在这个 wordpress 页面上，以便所有内容都居中对齐，我尝试使用以下 CSS 将所有产品包装在一个 div 中，但这所做的是将内容包装到中间，但产品仍然保持对齐。

#big-center {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: block-axis;
-moz-box-orient: block-axis;
box-orient: block-axis;

-webkit-box-align: center;
-moz-box-align: center;
box-align: center;

-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}

我想知道是否有人有任何建议，或者我是否缺少这样做的东西？

这里是页面的链接：http://www.stickems.co.uk/shop-screen-cleaners/

【问题讨论】：

这通常由display: block; margin: auto; 完成 - 但整个div 已经以您的站点为中心。见顶部 5 宽。如果将外部 div 居中，并不意味着其中的每一行都独立居中。
另外，从 UX 的角度来看，纯粹是在我看来：它现在看起来比任何东西居中更好。
不要使用 tinyURL 或链接重定向服务。请简单地发布实际可点击的 URL，或者不要。

标签： css alignment centering center-align

【解决方案1】：

有点难以理解你的真正意思，但我理解了它；不太清楚，因为我认为它看起来很好，但这是使它与中心对齐的原因。虽然它不是完美的编码，但它会帮助你。

转到第 1427 行并在您的 css 中使用以下内容更改当前行； wp-content/themes/stickems/style.css?ver=1.0

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-bottom: 25px;
    margin-left: 38%;
    margin-right: 50%;
    width: 22.125%;
}

正如我所说，如果这就是你的意思，它会起作用，但它不是完美的编码。从您的问题来看，这就是我所理解的您想要的； http://i.imgur.com/sEV7rVe.png

【讨论】：

嗨@iBrazilian2 不幸的是，虽然这个中心的一切（这是完美的）它会将每个产品放到一个新行上，而不是目前保持行格式？
所以总的来说，您要做的就是将所有第一个
居中，但仍保持彼此相邻？

完全正确 :) 如果对我有帮助的话，我模拟了我试图实现的页面外观:) i.imgur.com/DyUMQzB.jpg

嗨@iBrazilian2 对我的截图有帮助

我忘了检查stackoverflow，我很抱歉。我能做到的唯一方法是编辑每个框，其中包含您希望以特定宽度和填充为中心的框，这不是一种非常棒的做事方式，但如果您不打算经常更改它它会工作得很好。 i.imgur.com/eVPSdVB.png 查看带有样式的 html，这就是我添加到 ul 和 li 中的内容，您还必须将相同的内容添加到您想要居中的框中。

【解决方案2】：

试试这些样式更改是否对您有帮助。

.woocommerce ul.products li.product{
  float:left; //Remove this
  display:inline-block; //Add this
  margin-right:3.3%; // changed from 3.8 to 3.3
}

.woocommerce ul.products{
  text-align:center; //add this
}

【讨论】：

您好，感谢您尝试帮助回答这个问题 :) 我将上面的 css 添加到我的网站，但运气不佳。然后我删除了 fload 线，仍然没有运气
@MatthewSolomon 你能检查一下这些样式是否被你的css中的其他样式覆盖
我刚刚再次尝试应用！important;到每一行，并删除浮动，这就是结果：i.imgur.com/ErD9idc.jpg - 如果有任何帮助，我制作了一个我试图实现的页面外观的模型:) i.imgur.com/DyUMQzB.jpg
第一张图片显示当您删除浮动时。然后，当您将 display:inline-block 应用于同一元素时，产品将连续显示 4 个。你能不能再试一次。复制我的代码并将其添加到样式表的底部，不必添加重要内容。还将float 更改为none。请让我知道它是否有效。
你好@james 好的，所以我照原样复制了代码，然后将浮点数调整为无。这导致产品是单个文件而不是居中？ :X 对不起！这有什么意义吗？ :)