父 div 容器下的左、右和居中对齐子 div答案

【问题标题】：Left, Right and Center Align Child div under Parent Div Container父 div 容器下的左、右和居中对齐子 div
【发布时间】：2017-07-02 12:21:06
【问题描述】：

我想根据其类将子 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 为中心。谁能帮我这个？

【问题讨论】：

在中心项目上也尝试float:left
你疯了吗？...@PrasunJajodia

标签： html css

【解决方案1】：

我认为你应该使用 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"

【讨论】：

【解决方案2】：

将盒子分成左、中和右的更简单方法是使用 CSS flexbox。通过将 left、center 和 right 包装在一个新的 div 中，并使用 display:flex 将您的容器变成一个 flexbox，您可以用更少的代码来模拟这种行为。

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

<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>

【讨论】：

谢谢，但我想使用 CSS 类，这样我就不会限制我的 html 模板只有三个子 div。

【解决方案3】：

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

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

【讨论】：