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

如果您的目标是将所有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 2

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

修改：您也可以从外部style="..."删除<div>块，因为它实际上没有做任何事情。 <div>元素默认显示块，而align本身不是有效的css属性（尽管text-align是）。

修改2 ：如果您希望外部<div>居中，但内部<div>元素一个接一个地显示，只需设置width和margin上的<div>：

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

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

祝CSS学习好运。这是一个有趣的世界。

Answer 3

如果您不介意将内部div设置为内联块，则可以使用此hack 试试这个：

 #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在中心对齐

4 个答案: