Question

我遇到了多个＆＃34;内容的类似问题＆＃34;在容器中。我想将cataloglist-div置于内部div的中心，作为内部项的宽度。

HTML：

<div id="container">
  <section id="main"> 
  <div class="inside">
      <article id="liste" class="mod_article block"> 
      <div class="mod_cataloglist block">
          <div class="layout_simple">
              <div class="item first even">
                  <div class="item odd">
                  </div>
                  <div class="item even">
                  </div>
                  <div class="item odd">
                  </div>
                  <div class="item even">
                  </div>
              </div>
      </article> 
  </div>
  <div class="insidebottom">
  </div>
  <div id="clear">
  </div>
  </section> 
</div>

我尝试了几件事的CSS，但没有一件可以工作：

    #main .inside {
    display: block;
    float: left;
    margin-left: auto;
    margin-right: auto;
    min-height: 350px;
    padding-left: 40px;
    padding-right: 40px;
}

#main .mod_article {
    float: left;
}
.block {
    overflow: hidden;
}

.mod_cataloglist::after {
    clear: both;
}
.mod_cataloglist {
    clear: both;
    display: block;
    float: left;
    margin-left: auto;
    margin-right: auto;
}

.mod_cataloglist .layout_simple::after {
    clear: both;
}
.mod_cataloglist .layout_simple {
    display: block;
    overflow: hidden;
}

感谢您的任何建议

Answer 1

您的.mod_article是float:left。您不能将div放在没有定义宽度的文章中心。左侧浮动使其像内联元素一样，占据其子元素的宽度。

所以你的文章标签会尝试最小化它的宽度，同时被推到最左边，因为它可以进入其父元素。因此，试图将任何内容置于其中并不起作用，因为文章必须比其子项更大才能首先需要居中。

Answer 2

divCeption！

以下是一些中心div的方法示例，包括display: flex（其子项可以margin: auto为中心），display: table（其子项可以vertical-align 他们的孩子，然后可以用margin: 0 auto水平居中。请注意，其中一些解决方案是div特定的，例如使用margin: 0 auto进行水平居中;这是由于他们的默认display: block行为 - 如果我们在display: inline-block元素上使用.deep，则它们可能与text-align: center水平居中，就像它们内部的字符一样。< / p>

＆＃13;

.cont {
  display: flex;
  width: 200px;
  height: 200px;
  background: lightblue;
}

.item {
  display: inline-table;
  width: 40px;
  height: 40px;
  margin: auto;
  background: pink;
}

.inner {
  display: table-cell;
  vertical-align: middle;
}

.deep {
  height: 1em;
  width: 1em;
  margin: 0 auto;
  text-align: center;
  background: black;
  color: white;
}

＆＃13;

<div class="cont">
  <div class="item">
    <div class="inner">
      <div class="deep">h</div>
     </div>
  </div>
  <div class="item">
    <div class="inner">
      <div class="deep">i</div>
     </div>
  </div>
  <div class="item">
    <div class="inner">
      <div class="deep">!</div>
     </div>
  </div>
</div>

＆＃13;

Answer 3

好的，谢谢大家的好评。我可以用flex命令解决它。我受到这个例子的启发： http://codepen.io/HugoGiraudel/pen/LklCv

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

div中的div包含几个div

3 个答案: