html - 水平和垂直对齐

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之间的边距]而且左、右间距必须相等。

我无法想出一个通用的解决方案。有什么建议吗？

我正在尝试设计响应式 div

Answer 1

JS Fiddle

CSS:

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

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

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content.

MDN - CSS:text-align

因为我们有内容 display:inline-block 它们被认为是内联内容因此 text-align 将其内容居中

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