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

。

我需要解决现有网页上的问题，我需要在一个大的<div>里面有float : left;的中心元素。我不想删除浮动，我想知道什么是最好的方法来中心这些元素，使他们在两行。

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

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

浮动使得这很奇怪。否则

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

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

您可以使用flexbox。

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

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

如果你不打算浮动到顶部和左侧，我不认为浮动有什么意义。你需要掌握 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:将使元素相对于其初始位置进行定位。(即:如果元素被定位在X(初始位置)，那么将根据放置的属性进行移动)

Absolute:将使元素相对于下一个父元素定位。需要注意的一点是，元素是从页面流中移除的，这意味着可能会有多个元素堆叠在一起。

Fixed:将导致元素相对于浏览器窗口固定，通常称为viewport本身。如果向下滚动，位置将固定在，因此得名。

这是浏览器将如何处理使用的"box"/元素的类型(根据盒模型，所有元素都可以被视为盒)。如果你很难掌握这个概念，把 element {border: solid black} 放到你所有的css元素中，你就会明白我的意思了。

有多种显示将只进入三个可以说是最重要的:块，内联，内联块。

元素将占用所需的最大水平空间。以 li 为例。列表点将占用最大的水平空间，因此每个单独的li可以被视为一个块。元素将占用最小的水平和垂直空间，以适应流。想想锚点 a 标签，因为它将占用最小的空间，以适应段落的流程。

inline -block:被认为是一个内嵌值，但是可以改变元素的宽度和高度。

对于您的示例，我使用了相对定位元素(将其定位为相对于其最初位置的12px右)并将显示更改为inline-block，因为div自然是块元素，因此，如果没有inline-block显示功能，它们一次只能堆叠1。

相关内容

最新更新

热门标签：