Question

我想根据我的父级Div将子Div与左，右或中心对齐。

我做了以下事情，

.container{
  border:1px solid;
  padding:1px;
  width:100%;
  margin:1px;
}

.left-item{
  float:left;
  padding:auto;
  margin:1px;
}

.center-item{  
   padding:auto;
  margin:1px;
 }

.right-item{
 float:right;
 padding:auto;
  margin:1px;
}

<div class="container">        
    <button class="left-item">Left</button> <button class="center-item">Center 2</button> <button class="right-item">Right</button> <button class="left-item">Left</button> <button class="right-item">Right</button> <button class="center-item">Center 1</button> <button class="center-item">Center 3</button>        
</div>

我无法将对齐 child Divs置于父级Divs的中心位置。谁能帮我这个？

Answer 1

只需将text-align：center属性赋予容器div即可。 JS小提琴 - https://jsfiddle.net/72aqsq83/1/

.container{
  border:1px solid;
  padding:1px;
  width:100%;
  margin:1px;
  text-align:center
}

Answer 2

将框分为左，中，右的简单方法是使用CSS flexbox。通过将左侧，中间和右侧包裹在新的div中并将容器变为带有display:flex的弹性箱，您可以使用更少的代码模拟此行为。

＆＃13;

.container {
  border: 1px solid;
  padding: 1px;
  width: 100%;
  margin: 1px;
  display:flex;
  justify-content:space-between;
}

＆＃13;

<div class="container">
  <div>
    <button>Left</button>
    <button>Left</button>
  </div>
  <div>
    <button>Center 2</button>
    <button>Center 1</button>
    <button>Center 3</button>
  </div>
  <div>
    <button>Right</button>
    <button>Right</button>
  </div>
</div>

＆＃13;

Answer 3

我认为你应该使用CSS flexboxes属性这可能会解决您的问题：

.container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

要了解有关Flexbox属性的更多信息，请参阅以下链接：
MDN - Using CSS flexible boxes
MDN - flex-flow
MDN - justify-content

CSS灵活的盒子易于使用，并且完全支持：
CanIUse - "flexbox"

左，右和中心在父Div容器下对齐子div

3 个答案: