使用 css 调整屏幕大小后水平对齐 div

Question

我试图在浏览器调整大小时水平对齐 div，目前，我有 3 个 div。根据要求，我可以添加额外的 div。我的问题是一旦我将 window 大小增加到 2500 以上，屏幕右侧就会变空并且所有 div 都向左浮动。因为我无法根据要求将 div 宽度设置为 30-33%。下面是我的代码。请帮助。

div.box-container {
  mc-grid-row: true;
  margin-left: auto;
  margin-right: auto;
  float: left;
  display: flex;
  width: 100%
}

div.box {
  float: left;
  background-color: #ffffff;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  height: 326px;
  margin-left: 20px;
  margin-bottom: 0;
  top: 55px;
  border-top-right-radius: 0px;
  width: 30%;
  border: 1px solid #cccccc;
}

<div class="box-container">

  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
</div>

Answer 1

在使用 flex 时使用 justify-content: center;。这意味着弹性内容将始终在所有屏幕类型上居中。

div.box-container {
  mc-grid-row: true;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%
}

div.box {
  background-color: #ffffff;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  height: 326px;
  margin-bottom: 0;
  top: 55px;
  border-top-right-radius: 0px;
  width: 33.33%;
  border: 1px solid #cccccc;
}

body {
  margin: 0;
}

<div class="box-container">

  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
</div>

编辑 ~ 添加另一个 div，减少 % 和 div 封面。展示 min-width 响应能力。

div.box-container {
  mc-grid-row: true;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%
}

div.box {
  background-color: #ffffff;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  height: 326px;
  margin-bottom: 0;
  top: 55px;
  border-top-right-radius: 0px;
  width: 24%;
  min-width: 300px;
  border: 1px solid #cccccc;
}

body {
  margin: 0;
}

<div class="box-container">

  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
</div>

Answer 2

删除 float 并仅使用 flex:

* {
  box-sizing: border-box;
}

body,
html {
  margin: auto;
}

div.box-container {
  mc-grid-row: true;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
}

div.box {
  background-color: #ffffff;
  padding: 10px;
  height: 326px;
  margin-left: 20px;
  margin-bottom: 0;
  top: 55px;
  border-top-right-radius: 0px;
  width: calc(100vw / 3);
  /*calc(100vw / number of div)*/
  border: 1px solid #cccccc;
  word-break: break-word;
}

<div class="box-container">
  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
  <div class="box">
    <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
  </div>
</div>

Answer 3

正如@Arman Ebrahimi 已经正确提到的那样。仅使用弹性框。使用媒体查询可以很好地处理责任问题。

工作示例

* {
  box-sizing: border-box;
}

div.box-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
  gap: 10px;
  width: 80%;
  margin: 0 auto;
  /* or use justify-content: center; */
}

.box {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 30%;
  border: 1px solid #cccccc;
  word-break: break-word;
  height: 326px;
}

@media (max-width: 800px) {
  .box {
    flex: 100%;
  }
}

<div class="box-container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>

  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

使用 css 调整屏幕大小后水平对齐 div

align div horizontally after screen resize using css

html

css

flexbox