Question

我必须水平对中div。 cont1 div是父div。它将占用设备的宽度。并且cont2是子div，它将根据其内容取宽度。并且child div的数量是动态的。所有的div都完美地居中。但问题在于最后一个div。我想要左边的最后一个div。我尝试了很多技巧。但无法解决这个问题。

我不想使用javascript或jquery。

这是小提琴链接 Fiddle link

这是html

<div class="cont1">
    <div class="cont2">
        <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
         <div class="child">  </div>

    </div>
</div>

这是Css

.cont1 {
    background-color: #e6e6e6;
    height: auto;
    margin: 0 auto;
    min-width: 600px;
    position: relative;
    text-align: center;
    width: 840px;
}
.cont2 {
    display: inline;
    text-align: left;
}
.child{
     display: inline-block;
    margin: 4px;
    max-width: 230px;
    width: 30%;
height:100px;
    background-color:red;
}

Answer 1

Demo

CSS

.cont1 {
    background-color: #e6e6e6;
    height: auto;
    margin: 0 auto;
    min-width: 600px;
    position: relative;
    width: 840px;
    text-align: left; /* make it left */
}

.cont2 {
    /* display: inline; remove this */
    max-width:600px; /* add this */
    margin:auto; /* add this */
}

Answer 2

从text-align: center;开始.cont1并用text-align: left替换.cont2。

.cont1 {
background-color: #e6e6e6;
height: auto;
margin: 0 auto;
min-width: 600px;
position: relative;
width: 840px;
}

.cont2 {
    display: inline;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

UPDATED FIDDLE LINK

中心儿童动态divs

2 个答案: