53

我正在测试像 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% 并且在屏幕上居中是正确的，但是当我使窗口变宽并且绿色分隔线移动时，您可以看到某些点上的绿色框没有居中。

如何帮助我解决这个问题？

4

6 回答 6

89

我之前的回答显示了一种坦率的过时方法（它仍然有效，只是有更好的方法来实现这一点）。出于这个原因，我正在更新它以包含更现代的弹性盒解决方案。

在此处查看对它的支持；在大多数环境中，使用它是安全的。

这利用了：

注意：与 HTML 和 CSS 一样，这只是获得所需结果的众多方法之一。在选择适合您的规格的方式之前，请进行彻底的研究。

.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;应用于您的容器并将您.block的 s 显示为内联块元素：

.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>

这是一个更新的小提琴

请注意，我已经注释掉了您的 s 之间的空白<div>。由于元素现在内联显示，因此您的空间将被确认。这是“争夺空间”的众多方法之一。

于 2013-06-19T10:19:26.533 回答
7

如果您更改.block元素上的样式，而不是float:left;使用display:inline-block;，则可以添加text-align:center到.container.

.container {
  height: 300px;
  width: 70%;
  background: #EEE;
  margin: 10px auto;
  position: relative;
  text-align: center
}

.block {
  background: green;
  height: 100px;
  width: 100px;
  margin: 10px;
  display: inline-block;
}
<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>

于 2013-06-19T10:19:28.827 回答
4

所以基本上你的 CSS 需要这些改变

.container { text-align:center; }
.block { display:inline-block; *display:inline; zoom:1; vertical-align:top; }

使 CSS与 IE7 兼容。

要将底部图块与左侧对齐，需要一些 javascript。由于.querySelector()向后兼容性，以下适用于任何地方，包括 IE8+；为了简化和 IE7 兼容性，强烈推荐使用 jQuery：

if (!window.addEventListener) {
    window.addEventListener = function (type, listener, useCapture) {
        attachEvent('on' + type, function () {
            listener(event);
        });
    };
}
window.addEventListener('load', makePaddings, false);
window.addEventListener('resize', makePaddings, false);

function makePaddings() {
    var container = document.querySelector('.container');
    var blocks = document.querySelectorAll('.block');
    var br = [],
        max = 0,
        i = 0;
    var top = blocks[0].getBoundingClientRect().top;
    while (blocks[i] && blocks[i].getBoundingClientRect().top == top) {
        i++;
    }
    var show = blocks.length % i ? i - blocks.length % i : 0; /* how many paddings are needed */
    var paddings = document.querySelectorAll('.padding');
    if (paddings.length < show) { // add missing paddings
        i = show - paddings.length;
        while (i--) {
            var elem = document.createElement('div');
            elem.className = 'padding';
            elem.style.visibility = 'hidden';
            container.appendChild(elem);
        }
        paddings = document.querySelectorAll('.padding');
    }
    for (i = 0; i < paddings.length; i++) {
        paddings[i].style.display = (i < show) ? 'inline-block' : 'none';
    }
}

jsfiddle

于 2013-06-19T14:07:51.927 回答
3

现在您可以使用Flexbox属性作为布局的基础。这将允许您更好地控制子元素。

.container {
    width: 70%;
    background: #EEE;
    margin: 10px auto;
    position: relative;
    display:flex;
    flex-wrap:wrap;
    justify-content: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>

注意：您必须需要验证支持，并且可能需要一些供应商前缀。但截至 2017 年 4 月，大多数浏览器都允许使用。

于 2017-04-07T16:08:46.573 回答
2 

.container {
  background: lightgrey;
  height: auto;
  width: 70%;

  margin: 10px auto;
  position: relative;
  
  display: flex;
  flex-wrap: wrap;  
  justify-content: space-around;
}
.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>

于 2017-09-27T15:47:52.293 回答
-1 
<body>

<div class="container">
       <div style="width:78%; margin:0 auto;">
        <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>
</div>
</body>

试试这个 div " <div style="width:78%; margin:0 auto;">"

于 2013-06-19T10:24:19.243 回答