如何将包含许多 div 的 div 居中对齐

Question

我正在尝试将所有 foo 块与网页的水平中心对齐。

查看下面我的代码-

<div id="cert" style="display:block; align:center;">
  <div class="foo" style="background-color:violet;"></div>
  <div class="foo" style="background-color:indigo;"></div>
  <div class="foo" style="background-color:blue;"></div>
  <div class="foo" style="background-color:green;"></div>
  <div class="foo" style="background-color:yellow;"></div>
  <div class="foo" style="background-color:orange;"></div>
  <div class="foo" style="background-color:red;"></div>
  <div class="foo" style="background-color:silver;"></div>
</div>

class foo

.foo {
float: left;
width: 40px;
height: 40px;
margin: 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
border-radius: 5px;
}

Answer 1

从您的 css 中删除 float: left; 并添加 margin: 5px auto，这应该使您的 <div> 元素水平居中。 float: left 将始终将您的内容推向左侧。

编辑：您还可以从外部 <div> 中删除 style="..." 块，因为它实际上没有任何作用。 <div> 元素默认显示块，align 本身不是有效的 css 属性（尽管 text-align 是）。

编辑2：如果你想让外面的<div>居中，而里面的<div>元素依次显示，设置a width 和 margin 在你的外侧 <div>:

#cert {
    width: 500px; /* or whatever you want */
    margin: 0px auto;
}

如果您希望内部 <div> 元素单独居中（而不是在居中的块内左对齐），那么您将需要其他答案（即设置外部 <div> 到 text-align: center; 和内部 <div> 元素到 display: inline-block;)

祝学习顺利CSS。这是一个有趣的世界。

Answer 2

如果您的目标是将所有 div 水平排成一行，请使用：

.foo {
    width: 40px;
    height: 40px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, .2);
    border-radius: 5px;
    display:inline-block;
}
#cert {
    text-align:center;
}

<div id="cert" style="display:block; align:center;">
    <div class="foo" style="background-color:violet;"></div>
    <div class="foo" style="background-color:indigo;"></div>
    <div class="foo" style="background-color:blue;"></div>
    <div class="foo" style="background-color:green;"></div>
    <div class="foo" style="background-color:yellow;"></div>
    <div class="foo" style="background-color:orange;"></div>
    <div class="foo" style="background-color:red;"></div>
    <div class="foo" style="background-color:silver;"></div>
</div>

在父级 div 上使用 text-align:center 使其内容居中，然后删除子级上的 float:left 并改为使用 display:inline-block.

Answer 3

你可以使用这个 hack，如果你不介意将你的内部 div 设置为 inline-block 你可以试试这个：

 #cert {
 width: 80%;
 margin: 1% auto;
 text-align: center;
 }

 #cert .foo {
  display: inline-block;
 }

Answer 4

我不确定你的意思是不是这样，这里的 foo 元素是垂直居中对齐的，参见 codepen 示例

http://codepen.io/Edrees21/pen/bNObqm

<div id="cert">
  <div class="foo" style="background-color:violet;"></div>
  <div class="foo" style="background-color:indigo;"></div>
  <div class="foo" style="background-color:blue;"></div>
  <div class="foo" style="background-color:green;"></div>
  <div class="foo" style="background-color:yellow;"></div>
  <div class="foo" style="background-color:orange;"></div>
  <div class="foo" style="background-color:red;"></div>
  <div class="foo" style="background-color:silver;"></div>
</div>

CSS

html {
    height: 100%;
}

body {
    display: table;
    height: 100%;
}
#cert {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}
.foo {
    float: left;
    width: 40px;
    height: 40px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,.2);
    border-radius: 5px;
}

如何将包含许多 div 的 div 居中对齐

How to align a div which contains many divs to align in the center

html

css

alignment