如何使用内联块（响应式）将列对齐以在较小的屏幕上居中答案

【问题标题】：How to align columns to center on smaller screens using inline-block (responsive)如何使用内联块（响应式）将列对齐以在较小的屏幕上居中
【发布时间】：2020-10-15 21:24:15
【问题描述】：

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

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;
}

我试图将其作为网格、内联网格和其他不同的样式。内联块工作完美，但没有响应。可能解决方案很简单。 THX！

【问题讨论】：

标签： css alignment row responsive

【解决方案1】：

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

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

    /* 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>

【讨论】：