Question

我想要实现的目标如下，我底部有6个div，它们是水平对齐的，屏幕尺寸的其余部分左右相等。

现在当屏幕的宽度很小以便将它们显示在一行中时，我希望将它们显示为两行（每行3个div）。所有这一切现在都在工作，但是当它变成两行布局时，左右相等的边距消失了，它们会在屏幕左侧剪辑。

我错过了什么吗？

.container{
  z-index: 3;
  bottom: 20px;
  width: 100%;
  position: absolute;
}

.center-container{
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.inner-container{
  display: inline-block;
}

.group-container{
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
}

.element{
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: #000000
}

<div class="container">
  <div class="center-container">
      <div class="inner-container">
          <div class="group-container">
              <div class="element"></div>
              <div class="element"></div>
              <div class="element"></div>
          </div>
          <div class="group-container">
              <div class="element"></div>
              <div class="element"></div>
              <div class="element"></div>
          </div>
      </div>
  </div>
</div>

JsFiddle工作一行布局的示例：https://jsfiddle.net/7ef7xLhu/

JsFiddle非工作两行布局示例：https://jsfiddle.net/9oc19oky/

提前谢谢你：）

Answer 1

您可以通过将text-align: center;设置为父级来对齐它们，因为它们是inline-block元素，默认情况下它们与左侧对齐。

.inner-container {
    display: inline-block;
    text-align: center;
}

.container {
  z-index: 3;
  bottom: 20px;
  width: 100%;
  position: absolute;
}

.center-container {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.inner-container {
  display: inline-block;
  text-align: center;
}

.group-container {
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
}

.element {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: #000000
}

<div class="container">
  <div class="center-container">
    <div class="inner-container">
      <div class="group-container">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div>
      <div class="group-container">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div>
    </div>
  </div>
</div>

Answer 2

将text-align: center;添加到.inner-container

＆＃13;

.container {
  z-index: 3;
  bottom: 20px;
  width: 100%;
  position: absolute;
}

.center-container {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.inner-container {
  display: inline-block;
  text-align: center;
}

.group-container {
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
}

.element {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: #000000
}

＆＃13;

<div class="container">
  <div class="center-container">
    <div class="inner-container">
      <div class="group-container">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div>
      <div class="group-container">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

将 text-align：center 添加到父级（内部容器）。你应该排序。

Answer 4

只需在您的CSS中添加，就可以了。：）

.inner-container {
     text-align: center;
}

如果需要，您也可以参考我的链接。

https://jsfiddle.net/Dhruvil21_04/hadu5my3/

Html / Css动态居中

4 个答案: