Question

所以我最近接手为我的学校机器人俱乐部运营一个网站，并对造型做了一些小改动。虽然创作者非常出色，但他做了一些非常愚蠢的造型选择，当页面很小时，绝对完全破坏。

现在，页面中包含主要内容的所有div都有一个80px的左侧填充。虽然这一开始并没有看起来，当你到达页面底部时，你会发现居中的文本和其中一个div中的表格中的内容不适合页脚上的居中图形。

我试图通过将他添加到视线中的所有div和部分居中来纠正这种变化，这样他们总是在两侧都有相同数量的填充。我想只用html和css做这个，但如果需要，我会用JS做这件事。

现在，包含内容所有不同部分的div看起来像这样：

fetchCharacterDescriptions("Senaxx", "2");

我查找了这个问题并且只发现了一个不错的答案，即删除填充并使用包装div将文本对齐设置为中心，如下所示：

<div id="participants-contents" class="row text-left" style="padding-left: 80px">
    blah

虽然删除填充确实改变了参与者内容div中的文本和内容，但是通过将其一直推到左边，包装器完全没有做任何事情。

任何人都可以了解我的情况吗？

我正在研究css中的calc（）函数，希望我们可以使用元素的宽度，但是它不会出现这样的实用程序存在。

编辑：对不起，我不是最熟练的助推器。

我试图将中心的主要代码块（学校名称已删除，替换为_________）：

<div id="participants-wrapper" style="text-align: center">
    <div id="participants-contents" class="row text-left">
        blah

样式是一个单独的样式表，如果需要我可以链接，但我宁愿不去搜索所有内容。

Answer 1

在Bootstrap中水平居中元素的最简单方法是为其父级提供
类 text-center并将display: inline-block应用于自己。当然，还有一些其他小细节可以照顾，例如（确保孩子'width小于父母'，确保左右边距和填充相等等等。）。

由于所有text-center类都适用于position:relative;和text-align:center;，所以在本例中我选择不使用Bootstrap，而是直接暴露CSS规则，这些规则直接涉及这种居中技巧工作原理：

parent {
  position: relative;
  text-align: center;
  /*******************/

  display: block;
  padding: 1rem;
  margin: 3rem;
  border: 1px solid red;
}

child {
  display: inline-block;
  /*******************/

  width: 50%;
  background-color: rgba(0,0,0,.42);
  color: white;
  padding: .5rem;
}
parent-label {
  position: absolute;
  top: -1.2rem;
  left: 1.2rem
}
parent,child {
  box-sizing: border-box;
}

<parent>
  <parent-label>This is your parent...</parent-label>
  <child>
    ...and this is your child
  </child>
</parent>

另一个重要细节是，应使用float从子项中删除任何float:initial;（如果已应用）。

作为旁注，我强烈建议您在接管使用此框架制作的网站的重新设计之前花一些时间研究Twitter Bootstrap布局，网格系统和实用程序类的基本原则。

这是一个聪明可靠的框架，但我见过很多人在反对它而不是利用它。

在页面上居中大量的div

1 个答案: