Question

我一直在尝试学习如何对两个居中的并排编码。我尝试过浮动：左起所有，只是不居中。我需要将它居中放置，而不是一个盒子一直放在左边，另一个盒子放在右边。有什么帮助吗？ CSS，而不是html。

.boxcontainer {
  background: none;
  height: 275px;padding: 35px;
}

.Box1 {
  background: rgba(137,20,20);
  border: 1px solid black;
  border-radius: 5px;
  margin: 5px;
  float: center;
  height: 200px;
  width: 200px;
  padding: 15px;
  overflow: auto;
  transition: 0.65s
}

.Box2 {
  background: rgba(137,20,20);
  border: 1px solid black;
  border-radius: 5px;
  margin: 5px;
  float: center;
  height: 200px;
  width: 200px;
  padding: 15px;
  overflow: auto;
  transition: 0.65s
}

Answer 1

我在display:flex;justify-content:center中添加了.boxcontainer

.boxcontainer {background: none;height: 275px;padding: 35px;display:flex;justify-content:center}

.Box1 {background: rgba(137,20,20);border: 1px solid black;border-radius: 5px;margin: 5px;float: center;height: 200px;width: 200px;padding: 15px;overflow: auto;transition: 0.65s}

.Box2 {background: rgba(137,20,20);border: 1px solid black;border-radius: 5px;margin: 5px;float: center;height: 200px;width: 200px;padding: 15px;overflow: auto;transition: 0.65s}

<div class="boxcontainer">
  <div class="Box1"></div>
  <div class="Box2"></div>
</div>

居中并排盒子

1 个答案: