水平和垂直对齐

Question

演示 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的大小。

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

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

我正在尝试设计响应式div

- Gibbs

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”属性“指定一个元素应该从正常流中移除，并放置在其容器的左侧或右侧”。

- Mi-Creativity

---

请问您能否解释一下如何使用添加属性来实现所需的解决方案？ - Gibbs

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>

Or if you want equal space between divs you can use 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>

- Nenad Vracar