Responsive design 如何将响应列表从三列调整为一列（使用responsivegridsystem.com）

我使用的是我的专栏，下面是我的想法：

我希望列表的工作方式如下：

最大的问题是，在一定数量的px（记不清确切数字）以上，三列网格居中，但由于单元格宽度等原因看起来不居中。而在该数量的px以下（当列表处于单列模式时），偏离中心的问题更为严重

同样，我意识到这与单元格宽度等有关，但我不知道在哪里进行更改，我需要在两种尺寸下执行以下操作：

左对齐文本和项目符号

将列表本身放在页面的中心

如有任何建议，将不胜感激。如果您能提供有关CSS更改的详细信息，我将不胜感激

---

PS：如果有其他方法在响应网格系统之外实现这一点，我也愿意接受。

文本看起来不居中，因为它不居中。容器div居中，但由于将文本向左对齐，因此它的所有字符都向左对齐，就像将文本向右对齐一样

您可以将文本对齐到中间，但是复选框图标不会对齐。如果您希望文本居中，但仍有图标对齐，则需要附加图标，以便除文本之外的其他内容。您可以将它们显示为

，但缺点是文本和图标之间的空间大小不同

我要说的是，基本上你不能用这种方式将列居中（只要你不确保每个

中的文本宽度相等），但是你可以伪造它，这就是你所指的网站上的内容

要伪造它，只需给每个列div一个唯一的类名（或使用它作为目标），然后手动移动每个列，使其看起来像内容居中一样。您可以给它们不同的

宽度

-值（在您的示例中就是这样做的）、不同的

填充

-值或类似值。那完全取决于你

---

对于单列布局，请执行类似的操作，添加一个

padding

-值以使它们更靠近中心，但显然对所有列div使用相同的值

谢谢，@Nils。我会尝试一下，然后再报告。干杯尝试过之后，我意识到我不知道如何“给每个列div一个唯一的类名”。你能举一些CSS的例子吗？我想你知道怎么做，我可能只是用一种奇怪的方式表达了自己。您有三个

div

，类名为

span\u 1\u/u 3

，将要居中的列表项包装起来。给出所有这些

div

和额外的类名，以便您可以分别针对它们并给它们不同的宽度。就这些。：-）我照你的建议做了。确实有助于使用唯一的类名来定位列div。目前，我正在添加一个左边距：30%以尝试“居中”单列列表的第一个div，但我无法理解为什么在调整窗口大小时，30%不“灵活”。它似乎保持静止。有什么想法吗？快到了。。。谢谢