如何使用内联块（响应式）将列对齐到较小屏幕的中心

Question

我的带列的行效果很好，但在较小的屏幕上它向左对齐，应该居中。我已经尝试了数百个教程，但没有任何积极的结果。它必须很简单，提前感谢任何帮助:)

HTML:

  <div class="container">
    <div id="offer" class="row">
      <div class="column">
        <div class="box">
        </div>
      </div>
      <div class="column">
        <div class="box">
        </div>
      </div>
      <div class="column">
        </div>
      </div>
    </div>
  </div>

CSS:

    /* Offer start Section*/
.container {
    text-align:center;
    margin:0 auto;
  }
.container .row {
    display:inline-block;
    vertical-align: middle;
    float: none;
  }
.column {
    width: 33.33%;
    padding-right: 0;
    padding-left: 0;
    margin: -10px;
  }
@media screen and (max-width: 767.98px) {
    .column {
      width: 100%!important;
    }
}    
@media screen and (max-width: 991.98px) {
    .column {
    width: 50%;
    }
}
.row {
    text-align:center;
    margin:0 auto;
}
.row .column {
    display:inline-block;
    vertical-align: middle;
    float: none;
}
  /* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.box {
    width: 300px;
    padding: 10px;
    margin: 30px;
    box-shadow: 0px 0px 10px 1px rgba(136, 136, 136, 0.226);
    border-radius: 30px 30px 30px 30px;
    border: 0px solid #fff;
    text-align: center;
}

我试着把它做成网格、内嵌网格和其他不同的样式。内联块工作完美，但没有响应。可能解决方案很简单。谢谢！

Answer 1

我不确定您是否真的需要更改 row 以获得您尝试以下操作后的结果：https://jsfiddle.net/s4qkgjeL/1/

唯一要更改的是将 position: relative 和 display: inline-block 添加到 .box，因为您已经为此设置了宽度和边距 class 添加提到的两个属性将确保它们始终居中对齐。

    /* Offer start Section*/
.container {
    text-align:center;
    margin:0 auto;
  }
.container .row {
    display:inline-block;
    vertical-align: middle;
    float: none;
  }
.column {
    width: 33.33%;
    padding-right: 0;
    padding-left: 0;
    margin: -10px;
  }
@media screen and (max-width: 767.98px) {
    .column {
      width: 100%!important;
    }
}    
@media screen and (max-width: 991.98px) {
    .column {
    width: 50%;
    }
}
.row {
    text-align:center;
    margin:0 auto;
}
.row .column {
    display:inline-block;
    vertical-align: middle;
    float: none;
}
  /* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.box {
    position: relative;
    display: inline-block;
   
    width: 300px;
    padding: 10px;
    margin: 30px;
    
    box-shadow: 0px 0px 10px 1px rgba(136, 136, 136, 0.226);
    border-radius: 30px 30px 30px 30px;
    border: 0px solid #fff;
    text-align: center;
}

<div class="container">
  <div id="offer" class="row">

    <div class="column">
      <div class="box"></div>
    </div>

    <div class="column">
      <div class="box"></div>
    </div>

    <div class="column">
      <div class="box"></div>
    </div>

  </div>
</div>

如何使用内联块（响应式）将列对齐到较小屏幕的中心

How to align columns to center on smaller screens using inline-block (responsive)

css

row

alignment

responsive