本文介绍了在父对象中左对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下要求。



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



我已经尝试了以下的东西,但它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>

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

10-29 13:27