在容器中居中div [英] Centering divs inside a container

问题描述

我有多个更小的修复大小的div浮动在容器div内。我希望它们的间距相等，以便整个区块给人以中心对齐的印象。

但是这不会看起来不错的不同的屏幕尺寸，除非我具体设置宽度为不同的媒体。

UPDATE（响应重复报告）：
另一个问题（报告与此问题相同）的解决方案使用固定容器宽度而我上面提到，我不想修复容器宽度。所以解决方案不是我正在寻找的。

下面的Josh提到了完美工作的解决方案，只改变justify-content：space-around，即使窗口变窄，内容仍保持居中。 / p>

解决方案

那么，有什么技巧/

这绝对是一个黑客，但它似乎工作。您可以使用高度的 0 添加一些空的弹性框项目作为占位符。在这样做时，将按预期计算flexbox项目布局，因为空的flexbox项目的宽度将被考虑并填充空间。

空的flexbox的最小数量项目应该等于一行中的flexbox项目的最大数目减一。当然，您可以随时添加更多..以防万一。

在下面的示例中，我使用了 ：empty pseudo class 选择空的占位符flexbox项目。

更新示例

相关的CSS：

  .items：empty {
 visibility：hidden; 
 height：0; 
 width：100px; 
 margin：0 10px 0; 
} 
  

完整HTML / CSS：

$ b b

  #container {background-color：＃000;显示：flex; flex-wrap：wrap; justify-content：space-around; margin：25px auto;}。items {flex：0 0 auto; width：100px; margin：10px;}＃item1 {background-color：＃F00;}＃item2 {background-color：＃0F0;}＃item3 {background-color：＃00F;}＃item4 {background-color：#ABC;}＃项目5 {background-color：＃A00;}＃item6 {background-color：＃6AF;}＃item7 {background-color：＃07A;}＃item8 {background-color：＃A79;}＃item9 {background-color： ＃AF4;}＃item10 {background-color：＃FF4;}。items：empty {visibility：hidden; height：0; width：100px; margin：10px; margin-top：0; margin-bottom：0;}  

 < div id = container> < div id =item1class =items> a< / div> < div id =item2class =items> b< / div> < div id =item3class =items> c< / div> < div id =item4class =items> c< / div> < div id =item5class =items> c< / div> < div id =item6class =items> c< / div> < div id =item7class =items> c< / div> < div id =item8class =items> c< / div> < div id =item9class =items> c< / div> < div id =item10class =items> c< / div> < div class =items>< / div>< div class =items>< / div>< items>< / div>< div class =items>< / div>< div class =items>< / div>< div class =items> < / div>< div class =items>< / div>< div class =items>< / div>< / div>  
 

I have multiple smaller fix sized div floated inside a container div. I want them to be equally spaced so that the whole block gives the impression of being center aligned.

Right now they are aligned to the left (this is how float works, I know). I understand this is not readily possible, but just want some hacks so that I can achieve the same.

One way to do that is to calculate the necessary width (let say I need 3 divs per row, each 100px wide with 10px margin. So total width of container should be 100*3+60) and apply that width to the container div and set margin auto.

#container {
    width: 360px;
    margin: 0px auto;
}
.items { /* these are smaller divs */
    width: 100px;
    margin: 10px;
    float: left;
}

But this won't look nice with different screen size unless I specifically set width for different medias.

Another way is to use the flex display.

#container {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
.items { /* these are smaller divs */
    flex: 0 0 auto;
    width: 100px;
    margin: 10px;
}

It almost served my purpose, but the issue is when you have more than one divs in the bottom row, it just put the second div at the rightmost side, rather than aligning under second column (again this is expected behavior I know, not any issue).

So, are there any tricks/hacks for what I want to achieve?

UPDATE (in response to the duplicate reporting): The solution of the other question (that is reported as same as this question) uses fixed container width whereas I mentioned above that I don't want to fix container width. So that solution was not the one I am looking for.

The solution that worked perfectly is mentioned by Josh below, with only change of justify-content: space-around so that contents remain centered even when the window is narrowed.

解决方案

So, are there any tricks/hacks for what I want to achieve?

This is definitely a hack, but it seems to work. You can add some empty flexbox items with a height of 0 to serve as placeholders. In doing so, the flexbox item placement will be calculated as expected, because the empty flexbox item's width will be accounted for and fill the space.

The minimum number of empty flexbox items should be equal to the maximum number of flexbox items in a row minus one. Of course, you can always add more.. just in case.

In the example below, I used the :empty pseudo class to select the empty placeholder flexbox items.

Updated Example

The relevant CSS:

.items:empty {
  visibility: hidden;
  height: 0;
  width: 100px;
  margin: 0 10px 0;
}

Full HTML/CSS:

#container {
  background-color: #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 25px auto;
}
.items {
  flex: 0 0 auto;
  width: 100px;
  margin: 10px;
}
#item1 {
  background-color: #F00;
}
#item2 {
  background-color: #0F0;
}
#item3 {
  background-color: #00F;
}
#item4 {
  background-color: #ABC;
}
#item5 {
  background-color: #A00;
}
#item6 {
  background-color: #6AF;
}
#item7 {
  background-color: #07A;
}
#item8 {
  background-color: #A79;
}
#item9 {
  background-color: #AF4;
}
#item10 {
  background-color: #FF4;
}
.items:empty {
  visibility: hidden;
  height: 0;
  width: 100px;
  margin: 10px;
  margin-top: 0;
  margin-bottom: 0;
}

<div id="container">
    <div id="item1" class="items">a</div>
    <div id="item2" class="items">b</div>
    <div id="item3" class="items">c</div>
    <div id="item4" class="items">c</div>
    <div id="item5" class="items">c</div>
    <div id="item6" class="items">c</div>
    <div id="item7" class="items">c</div>
    <div id="item8" class="items">c</div>
    <div id="item9" class="items">c</div>
    <div id="item10" class="items">c</div>
    <div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div>
</div>

这篇关于在容器中居中div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！