如何在CSS中的容器内的多个div [英] How to center multiple divs inside a container in CSS

问题描述

我正在测试中心分隔线像windows地铁的风格。
如果你检查下面的代码：

I am testing to center divider like the style of windows metro. if you check following code:

.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％，以屏幕为中心是正确的，但是当我使窗口更宽，绿色分隔线移动时，你可以看到某些点的绿色框不居中。

The grey box is 70% and centering on the screen that is correct, but when I make the window wider and the green dividers are moving, you can see that the green boxes at some point are not centered.

我已经在整天搜索这个了：

I am searching for this already the whole day :s

如何帮我这个？

推荐答案

您可以对您的容器应用样式 text-align：center; $ c> .block 作为inline-block元素：

You could apply the style text-align:center; to your container and display your .blocks as inline-block elements:

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

以下是更新的小提琴

请注意注释了< div> 之间的空格。因为元素现在显示为内联，所以您的空格将被确认。这是以多种方式之一来空间。

Notice I've commented out the white-space between your <div>s. Because the elements are now displayed inline, your spaces will be acknowledged. This is one of many ways to 'fight the space'.

这篇关于如何在CSS中的容器内的多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！