Question

我试图将容器div的内容居中，其内部将有四个div对齐的2个div，但它没有居中。

不确定为什么会在谷歌浏览器和其他浏览器中发生这种情况。

以下是代码，请帮忙。

CSS：

.container{
  margin: auto;
  width:80%;
  height:900px;
  display: block;
  text-align: center;
 }

.column, .columns {
  float:left;
  min-height:1px;
  padding:0 15px;
  position:relative
}

section#{
  width: 100%;
  min-height: 500px;
  background: url(../images/sidebar_shadow.png) repeat-y left top;
  float: left;
  margin-top: -2px;
 }

.button.largebutton {
  min-width:400px;
  min-height:300px;
  float:left;
  margin: 60px;
 }

PHP

 <section id="main" class="column">
    <h1 class="info_bar">My Surveys</h1>
    <div class="container"> //contents of this div to be centered
        <?php include 'tabcontainer_surveyholder.php'; ?>  //pulls the four divs 
    </div>
 </section>

Answer 1

对此的一个解决方案是：

将4个div包装在一个包装中。在控制台中查看包装器的宽度，然后编写以下css：

.wrapper{ position:relative;
          left:50%; 
          margin-left:-(half of its total width);
}

这是一个codepen

click me

将div中的四个div居中

1 个答案: