Question

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

我一整天都在寻找这个：s

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

Answer 1

您可以将样式text-align:center;应用于容器，并将.block显示为内联块元素：

.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

注意我已经注释掉了<div>之间的空白区域。由于元素现在以内联方式显示，因此您的空格将被确认。这是'{3}}来'争夺空间'。

Answer 2

如果您更改了.block元素的样式，那么您可以使用float:left;代替display:inline-block;而不是text-align:center

Example

Answer 3

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

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

制作CSS compatible with 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

Answer 4

现在，您可以使用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>

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

Answer 5

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

Answer 6

<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;">”

如何在CSS中集中容器内的多个div

6 个答案: