我正在测试像 Windows Metro 风格的中心分隔线。
.container {
height: 300px;
width: 70%;
background: #EEE;
margin: 10px auto;
position: relative;
}
.block {
background: green;
height: 100px;
width: 100px;
float: left;
margin: 10px;
}
<div class="container">
<div class="block">1. name of the company</div>
<div class="block">2. name of the company</div>
<div class="block">3. name of the company</div>
<div class="block">4. name of the company</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
<div class="block">7. name of the company</div>
<div class="block">8. name of the company</div>
</div>
灰色框为 70%，并且在屏幕上居中，这是正确的，但是当我将窗口变宽并且绿色分隔线移动时，您可以看到绿色框在某些点没有居中。
在这方面可以如何帮助我？
我之前的回答显示了一种坦率地说已经过时的方法（它仍然有效，只是有更好的方法来实现这一点）。因此，我正在更新它以包含更现代的内容，flexbox https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox解决方案。
查看对其的支持here https://caniuse.com/#feat=flexbox;在大多数环境下，可以安全使用。
这利用了：
-
display: flex https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_flex：以 Flexbox 行为显示此元素
-
justify-content: center https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content将内部元件沿容器的主轴线居中对齐
-
flex-wrap: wrap https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap确保内部元素自动包裹在容器内（不要脱离容器）
Note: As is usual with HTML & CSS, this is just one of many ways to get the desired result. Research thoroughly before you choose the way that's right for your specifications.
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 70%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
.block {
background: green;
height: 100px;
width: 100px;
margin: 10px;
}
<div class="container">
<div class="block">1. name of the company</div>
<div class="block">2. name of the company</div>
<div class="block">3. name of the company</div>
<div class="block">4. name of the company</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
<div class="block">7. name of the company</div>
<div class="block">8. name of the company</div>
</div>
原答案
您可以应用该样式text-align:center;到您的容器并显示您的.blocks 作为内联块元素：
.container {
width: 70%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
.block {
background: green;
height: 100px;
width: 100px;
display:inline-block;
margin: 10px;
}
<div class="container">
<div class="block">1. name of the company</div><!--
--><div class="block">2. name of the company</div><!--
--><div class="block">3. name of the company</div><!--
--><div class="block">4. name of the company</div><!--
--><div class="block">5. name of the company</div><!--
--><div class="block">6. name of the company</div><!--
--><div class="block">7. name of the company</div><!--
--><div class="block">8. name of the company</div>
</div>
这是更新的Fiddle https://jsfiddle.net/s6e4navh/
请注意，我已经注释掉了您之间的空白<div>s。由于元素现在内联显示，因此您的空间将被确认。这是多种方法之一 https://css-tricks.com/fighting-the-space-between-inline-block-elements/来“对抗空间”。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
