Question

如何将页面中的所有内容居中，并使顺序从右向左，因为对齐位于左侧，顺序是从左到右。

这是代码：

修改中心父母div

.grid-item {
  float: left;
  width: 270px;
  min-height: 260px;
  max-height: 260px;
  background-color: whitesmoke;
  margin-bottom: 10px;
  border: solid 5px #bfbbd9;
  padding: 7px;
}

<div class="parent-div">
  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>1</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>2</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>3</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>4</h2>
      </div>
    </div>
  </a>
</div>

Answer 1

尝试将inline-block用于display并移除float。这应该可以解决。

＆＃13;

body {
  text-align: center;
}
a {
 display: inline-block;
 margin: 0 3px;
}
.grid-item {
  display: inline-block;
  width: 270px;
  min-height: 260px;
  max-height: 260px;
  background-color: whitesmoke;
  margin-bottom: 10px;
  border: solid 5px #bfbbd9;
  padding: 7px;
}

＆＃13;

<a href="#">
  <div class="grid-item">
    <div style="height:71px">
      <h2>1</h2>
    </div>
  </div>
</a>

<a href="#">
  <div class="grid-item">
    <div style="height:71px">
      <h2>2</h2>
    </div>
  </div>
</a>

<a href="#">
  <div class="grid-item">
    <div style="height:71px">
      <h2>4</h2>
    </div>
  </div>
</a>

<a href="#">
  <div class="grid-item">
    <div style="height:71px">
      <h2>5</h2>
    </div>
  </div>
</a>

<a href="#">
  <div class="grid-item">
    <div style="height:71px">
      <h2>6</h2>
    </div>
  </div>
</a>

＆＃13;

以不同分辨率预览：

移动

平板电脑/ iPad

<强>桌面

Answer 2

你需要：

将parent-div设置为固定宽度，并使用margin: 0 auto居中。
在direction: rtl上使用text-align: right和parent-div将项目与您想要的方向对齐。
将网格项更改为display:inline-block，而不是使用float
如果您希望在更高的屏幕分辨率下拥有更多列，请添加媒体查询。

＆＃13;

.parent-div {
   width: 592px;
   margin: 0 auto;
   direction: rtl;
   text-align: right;
}

@media (min-width: 900px) {
   .parent-div {
      width: 890px
   }
}

.grid-item {
  display: inline-block;
  width: 270px;
  min-height: 260px;
  max-height: 260px;
  background-color: whitesmoke;
  margin-bottom: 10px;
  border: solid 5px #bfbbd9;
  padding: 7px;
}

＆＃13;

<div class="parent-div">
  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>1</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>2</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>3</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>4</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>5</h2>
      </div>
    </div>
  </a>
</div>

＆＃13;

编辑：我在媒体查询中添加了一个步骤作为更高屏幕分辨率的3列示例。您可以全屏运行代码段以查看结果。

我该如何集中内容

2 个答案: