以自定义宽度居中浮动元素

Question

今天我遇到了一个大问题，就是要让设置了自定义宽度的浮动元素居中。为了更好地解释，我为您制作了一个片段：

body { text-align: center; }
.square {
    width: 20%; height: 100px;
    background: cornflowerblue;
    float: left;
}

.container {
    display: inline-block;
}

<div>
  <div class="container">
    <div class="square">a</div>
    <div class="square">b</div>
    <div class="square">c</div>
  </div>
</div>
<br>
<div>
  <div class="container">
    <div class="square">a</div>
    <div class="square">b</div>
    <div class="square">c</div>
    <div class="square">d</div>
    <div class="square">e</div>
  </div>
</div>

问题是前三个方块在居中后变小了。

我浮动元素的原因是第二个容器必须与第一个容器相同，并且它必须包含 5 个元素（以覆盖文档的整个宽度）。这是没有浮动的样子（见元素之间的缝隙）：

body { text-align: center; }
.square {
    width: 20%; height: 100px;
    background: cornflowerblue;
    display: inline-block;
}

.container {
    display: block;
}

<div>
    <div class="container">
        <div class="square">a</div>
        <div class="square">b</div>
        <div class="square">c</div>
    </div>
</div>
<br>
<div>
    <div class="container">
        <div class="square">a</div>
        <div class="square">b</div>
        <div class="square">c</div>
        <div class="square">d</div>
        <div class="square">e</div>
    </div>
</div>

现在元素的宽度正确了，但是由于元素之间的间隙，第二行没有覆盖文档的宽度。

有什么方法可以让自定义宽度居中的浮动元素？我应该为容器元素使用哪些样式？

Answer 1

好的，我想我得到了你需要的东西

.square {
width: 20%; height: 100px;
background: cornflowerblue;
display: inline-block;
font-size: 1rem;
}

.container {
display: block;
font-size:0;
}

jsfiddle

Answer 2

body { text-align: center; }
.square {
  width: 20%; height: 100px;
  background: cornflowerblue;
  float: left;

}

.container {
width:100%;
margin-right:20%;
margin-left:20%;
}

您在找这样的东西吗？

Answer 3

Add min-width:7px; this will solve your issue

body { text-align: center; }
.square { 
    width: 20%;
    height: 100px;
    background: cornflowerblue;
    float: left;
    min-width:7px;
}

.container {
    display: inline-block;
}

<div>
    <div class="container">
        <div class="square">a</div>
        <div class="square">b</div>
        <div class="square">c</div>
    </div>
</div>
<br>
<div>
    <div class="container">
        <div class="square">a</div>
        <div class="square">b</div>
        <div class="square">c</div>
        <div class="square">d</div>
        <div class="square">e</div>
    </div>
</div>

这里你的 5 div 行时代也在工作。

以自定义宽度居中浮动元素

Centering floated elements with custom width

css

css-float