在父对象中左对齐

问题描述

我有以下要求。

绿色的父宽度将根据设备宽度而变化。我需要所有的盒子在父母的中心。

我已经尝试了以下的东西，但它did not帮助我。

试用1

父{text-align：center}方框{display：inline -block} 。

这会产生以下输出

试用2

家长{text-align：center}方块{float：left} 。

这导致以下输出

试用3

父级{display：flex}方块 - >正当化justify-between 也没有工作。

  .parent {text-align：center;}。item {display：内联块; width：100px; height：100px; background：red;}  

 < div class = > < div class =item>< / div> < div class =item>< / div> < div class =item>< / div> < div class =item>< / div> < div class =item>< / div> < div class =item>< / div> < div class =item>< / div> < div class =item>< / div>< / div>  

解决方案

没有Javascript这个很难使用浮动和amp;或inline-block。

Flexbox提供了一些希望，但即使之后需要一些创造力。

基本上，只要每行的最大元素数量是已知的，您可以创建所需数量的不可见元素，可以与 justify-content：center



  * {margin：0; padding：0; box-sizing：border-box;}。parent {text-align：center; border：1px solid gray;宽度：80％; max-width：800px; margin：1em auto;显示：flex; flex-wrap：wrap; justify-content：center;}。item {width：100px; height：100px; margin：10px; background：red;}。balancer {height：0; width：100px; margin：0 10px; visibility：hidden;}  

 < div class = > < div class =item>< / div> < div class =item>< / div> < div class =item>< / div> < div class =item>< / div> < div class =item>< / div> < div class =item>< / div> < div class =item>< / div> < div class =item>< / div> < div class =balancer>< / div> < div class =balancer>< / div> < div class =balancer>< / div> < div class =balancer>< / div>< / div>  

I have the following requirement.

The green colored parent width will be varying depending on device width. I need all the boxes to be in the center of the parent.

I have tried the following things already, but it didnt help me.

Trial 1
Parent {text-align:center} box {display:inline-block}.

This resulted in following output

Trial 2
Parent {text-align:center} box{float:left}.

This resulted in following output

Trial 3
Parent {display:flex} box -> justify-around & justify-between also didn't work.

.parent {
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Any help on this will be appreciated.

解决方案

Without Javascript this very hard using floats &/or inline-block.

Flexbox offers some hope but even then some creativity is required.

Essentially, provided the maximum number of elements "per row" is known you can create a required number of invisible elements which can be ustilised in conjunction with justify-content:center to acheieve the last line appearance you require by essentially pushing the last line content back over to the left.

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  text-align: center;
  border: 1px solid grey;
  width: 80%;
  max-width: 800px;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: red;
}
.balancer {
  height: 0;
  width: 100px;
  margin: 0 10px;
  visibility: hidden;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>

</div>

这篇关于在父对象中左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！