Question

Demo Fiddle

.container {
    width: 100%;
    margin: 0 auto;
    display: table;
}

.child {
    width: 75px;
    border: 1px solid #F00;
    height: 75px;
    margin: 10px;
    float: left;
}

.circle {
    height: 25px;
    width: 25px;
    border: 1px solid #0F0;
    border-radius: 50%;
    margin: auto;
    top: 25%;
    position: relative;
}

我有n个div。我有100%宽度。我想将div水平居中对齐。一行中的div数基于div的大小。

如果我设置child div 250px的大小，那么例如，如果屏幕宽度为1000px，则只应横向放置3个div。[因为必须考虑div之间的边距]左，右间距必须相等。

我无法提出一般解决方案。有什么建议吗？

我正在尝试设计响应式divs

Answer 1

JS Fiddle

CSS：

.container{
  text-align:center; /* add this */

.child{
  display:inline-block; /*instead of float:left */

text-align CSS属性描述了像文本这样的内联内容如何在其父块元素中对齐。 text-align不控制块元素的对齐，只控制 内联内容 。

MDN - CSS:text-align

由于我们将内容display:inline-block视为内联内容，因此text-align会将其内容置于中心

虽然float属性“指定元素应从正常流量中取出并放置在其左侧或右侧侧容器“

Answer 2

您可以使用 Flexbox

执行此操作

.container{
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.child{
  flex: 0 0 75px;
  border: 1px solid #F00;
  height: 75px;
  margin: 10px;
  position: relative;
}

.circle{
  height: 25px;
  width: 25px;
  border: 1px solid #0F0;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

<div class="container">
  <div class="child"><div class="circle"></div></div>
  <div class="child"><div class="circle"></div></div>
  <div class="child"><div class="circle"></div></div>
  <div class="child"><div class="circle"></div></div>
  <div class="child"><div class="circle"></div></div>
</div>

或者如果你想在div之间使用相等的空格，你可以使用justify-content: space-around;

.container{
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.child{
  flex: 0 0 75px;
  border: 1px solid #F00;
  height: 75px;
  margin: 10px;
  position: relative;
}

.circle{
  height: 25px;
  width: 25px;
  border: 1px solid #0F0;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

<div class="container">
  <div class="child"><div class="circle"></div></div>
  <div class="child"><div class="circle"></div></div>
  <div class="child"><div class="circle"></div></div>
  <div class="child"><div class="circle"></div></div>
  <div class="child"><div class="circle"></div></div>
</div>

水平和垂直对齐

2 个答案: