Question

我正在努力创建有效堆叠和居中对齐的响应式pod（盒子）。已成功将盒子堆叠但无法成功应用中心对齐。需要框对齐居中对齐而不是当前左对齐：

当前代码：

0..9

.container {
    width:100%;
    height:600px;
}

.content {
    float:left;
    height:275px;
    margin-left:10px;
    margin-right:10px;
}

.content1 {
    width:300px;
    padding:10px;
    margin-top:20px;
    border: 1px solid rgb(204, 204, 204);
}

.content2 {
    width:300px;
    padding:10px;
    margin-top:20px;
    border: 1px solid rgb(204, 204, 204);
}

所有人都非常感谢！

Answer 1

可以采取很多措施来改善整体结构和代码可读性，但要回答您的问题，请将text-align: center;添加到.container类，并将.content的浮动替换为{{1} }}

Answer 2



    .fullbox{
        margin: 0 auto;
        display: table;
    }
    .container {
        width:100%; 
    }

    .content {
        float:left;
        height:275px;
        margin-left:10px;
        margin-right:10px;
    }

    .content1 {
        width:300px;
        padding:10px;
        margin-top:20px;
        border: 1px solid rgb(204, 204, 204);
    }

    .content2 {
        width:300px;
        padding:10px;
        margin-top:20px;
        border: 1px solid rgb(204, 204, 204);
    }
    <div class="fullbox">
      <div class="container">
          <div class="content1 content">
              <h2>Box 1</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae risus semper, faucibus nulla vitae, vulputate ante. Fusce non erat eu metus pellentesque suscipit facilisis ut dolor.</p>
          </div>

          <div class="content2 content">
              <h2>Box 2</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae risus semper, faucibus nulla vitae, vulputate ante. Fusce non erat eu metus pellentesque suscipit facilisis ut dolor.</p>
          </div>

      </div>
    </div>

我是否在这种情况下，你应该写@ media-Query，如下所示，只需添加此代码， .fullbox{ margin: 0 auto; display: table; } .container { width:100%; } .content { float:left; height:275px; margin-left:10px; margin-right:10px; } .content1 { width:300px; padding:10px; margin-top:20px; border: 1px solid rgb(204, 204, 204); } .content2 { width:300px; padding:10px; margin-top:20px; border: 1px solid rgb(204, 204, 204); }

    <div class="fullbox">
      <div class="container">
          <div class="content1 content">
              <h2>Box 1</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae risus semper, faucibus nulla vitae, vulputate ante. Fusce non erat eu metus pellentesque suscipit facilisis ut dolor.</p>
          </div>

          <div class="content2 content">
              <h2>Box 2</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae risus semper, faucibus nulla vitae, vulputate ante. Fusce non erat eu metus pellentesque suscipit facilisis ut dolor.</p>
          </div>

      </div>
    </div>

响应框的中央对齐

2 个答案: