Question

我希望水平（并且最好是垂直）对齐三个内部divs。将margin: 0 auto;应用于类vbox应该可以解决问题，但如下面的最小代码所示，它根本不会影响对齐。我怎样才能实现这种对齐？

HTML：

<body>
  <div id='site'>
    <div class='main'>
      <div class='vbox'>
        <div id='inner1'>inner1</div>
        <div id='inner2'>inner2</div>
        <div id='inner3'>inner3</div>
      </div>
    </div>
  </div>
</body>

CSS：

#site {
  width: 100%;
  height: 100%;
}

#main {}

.vbox {
  margin: 0 auto;
}

结果可以在this小提琴中看到。

Answer 1

您需要定义vbox的宽度：

.vbox {
  margin: 0 auto;
  width: 30%;/*apply as your own*/
}

100％宽的元素水平居中，但您看不到文本的对齐方式。为此，您应该应用text-align: center;

Answer 2

你可以这样做：

<强> HTML

<body>
  <div id='site'>
    <div class='main'>
      <div class='vbox'>
        <div class='inner'>inner1</div>
        <div class='inner'>inner2</div>
        <div class='inner'>inner3</div>
      </div>
    </div>
  </div>
</body>

<强> CSS

 #main {
  width: 100%;
}

.vbox {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}

.inner {
  display: inline-block;
  margin: 0 4px;
}

Answer 3

只需将display: table;提交给.vbox即可使其成为水平中心。

.vbox {
  margin: 0 auto;
  display: table;
}

<强> Working Fiddle

另一个解决方案是display: flex;

.main {
    display: flex;
}

<强> Fiddle

Answer 4

您可以使用display：inline-block作为内部div：

.vbox {
  text-align: center;
  font-size: 0; /* white spaces fix */
}

.vbox > div {
  font-size: 1rem; /* white spaces fix */
  display: inline-block;
}

Example

Answer 5

尝试这样的事情

#site {
  width: 100%;
  height: 100%;
}

#main {
  Width:100%;
}

.vbox {
  margin: 0 auto;
  padding:0;
}
.vbox div{
  width:32%;
  display:inline-block;
  padding:0;
  margin:0;
  box-sizing:border-box;
}

重要的一点是div的默认行为是占用其父级的整个宽度。要更改此设置，请为其指定显示模式inline-block。

Answer 6

您可以使用以下方法垂直对齐所有3个div：

#site {
  width: 100%;
  height: 100%;
}

#main {}

.vbox {
  margin: 0 auto;
}

.vbox div{
  width: 30%;
  float: left;
}

如果你有更多或更少的div，只需相应地更新宽度。

水平对齐内部`divs`

6 个答案: