Question

我需要修复现有网页上的问题，我需要将float : left;内的元素置于一个大<div>内。我不想删除浮动，我想知道将这些元素居中并将它们放在两行上的最佳方法是什么。

＆＃13;

.big {
  width: 150px;
  height: 150px;
  background: gold;
}
.a {
  margin: 5px;
  width: 50px;
  height: 20px;
  text-align: center;
  float: left;
  background-color: red;
}

＆＃13;

<div class="big">
  <div class="a">1</div>
  <div class="a">2</div>
  <div class="a">3</div>
  <div class="a">4</div>
</div>

＆＃13;

Answer 1

您可以使用flexbox。

＆＃13;

.big{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: gold;
  width: 150px;
  height: 150px;
}

.a {
  flex: 0 0 35%;
  margin: 5px;
  width: 50px;
  height: 20px;
  text-align: center;
  float: left;
  background-color: red;
}

＆＃13;

<div class="big">
  <div class="a">1
  </div>
  
  <div class="a">2
  </div>
  
  <div class="a">3
  </div>
  
  <div class="a">4
  </div>
</div>

＆＃13;

Answer 2

浮动让这很奇怪。除此以外

＆＃13;

.big{
  width:150px;
  height: 150px;
  background: gold;
  text-align: center;
}

.a{
  display: inline-block;
  margin: 5px auto;
  width:50px;
  height:20px;
  text-align: center;
  background-color:red;
}

＆＃13;

<div class="big">
  <div class="a">1
  </div>
  
  <div class="a">2
  </div>
  
  <div class="a">3
  </div>
  
  <div class="a">4
  </div>
</div>

＆＃13;

Answer 3

如果你没有意图漂浮到顶部和左边，我不相信漂浮有一点。您需要掌握 position 和 display 属性的使用。我相信这就是你要找的东西。我在下面解释说明相关的显示和位置属性，以及为什么我使用了我所做的。

.big {
 width: 150px;
 height: 150px;
 background: gold;
}
.a {
  position: relative;
  left: 12px;  
  display:inline-block; 
  margin: 5px;
  width: 50px;
  height: 20px;
  text-align: center;
  background-color: red;
}

定位是元素在文档中的定位方式。 CSS中的选项可以是static，relative，absolute，fixed。

静态：这是浏览器的默认设置。它不受定位的影响，只会定位在页面的自然流中。

相对：会导致元素相对定位到它的初始位置。（即：如果元素位于X（初始位置），则将根据放入的属性移动）

绝对：将导致元素相对于下一个父元素定位。需要注意的一点是，从页面流中删除元素意味着可以将多个元素叠加在一起。

修正：会导致元素相对于浏览器窗口被修复，通常称为视口本身。如果向下滚动，位置将固定，因此名称。

<强>显示

浏览器将如何处理所使用的“盒子”/元素的类型（根据盒子模型，所有元素都可以视为盒子）。如果您在掌握概念时遇到困难，请放置 element {border: solid black} 进入你所有的css元素，你会明白我的意思。

有多个显示器只能进入可能最重要的3个显示器：块，内联，内联块。

块：元素将占用所需的最大水平空间量。以 li 为例。列表点将占用最大水平空间量，因此每个单独的li可以被视为一个块。

内联：元素将占用适合流量所需的最小水平和垂直空间量。考虑锚 a 标记，因为它将占用适合段落流程所需的最小空间量。

内联块：考虑内联值，但能够更改元素的宽度和高度。

对于您的示例，我使用了相对定位元素（相对于它原来的位置右12px）并将显示更改为内联块，因为div自然是块元素，因此没有内联块显示功能，它们一次只能堆叠1个。

如何将浮动在一个<div>中的元素居中？

3 个答案: