本文介绍了保持一个元素居中在flexbox中不同宽度的两个元素之间的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在制作一个音乐播放控制器,该容器有3个部分:左,中和右。然而,由于左侧和右侧有不同的宽度,中心部分不在div的真正中心,但我需要它。我使用flexbox的空格选项来布局项目。



  #container {display:flex; justify-content:空格; background-color:lightgrey;}#container> div {height:100px; border:2px broken red; / *这只是为了看起来* / text-align:center; padding:5px;}  
 < div id = > < div>左侧< / div> < div>我要这个中心< / div> < div>右侧(额外长度的额外文字)< / div>< / div>  

解决方案

您可以使用边距近似居中。但是为了使用在各种视口中一致的flexbox实现完美的中心化,你必须稍微修改你的HTML。



你需要转换直接子的 #container 到一个显示:inline-flex 声明,并给他们一个 flex 1的值 justify-content:center



从那里,您将您的内容添加到子div。要在左侧和右侧div上对齐,请分别使用 margin-right:auto margin-left:auto



  #container {display:flex; background-color:lightgrey;}。flex {flex:1; display:inline-flex; justify-content:center;}。flex> div {height:100px; border:2px broken red; text-align:center; padding:5px;}。left div {margin-right:auto;} right div {margin-left:auto;}  
 < div id =container> < div class =left flex> < div>左侧< / div> < / div> < div class =center flex> < div>我要这个中心< / div> < / div> < div class =right flex> < div>右侧(额外长度的额外文字)< / div> < / div>< / div>  


I am making a music playback controller, and the container has 3 sections: left, center, and right. However, since the left and right sides have different widths, the center section isn't in the true center of the div, but I need it to be. I am using flexbox's space-between option to layout the items.

#container {
    display: flex;
    justify-content: space-between;
    background-color: lightgrey;
}

#container > div {
  height: 100px;
  border: 2px dashed red;
  
  /*This is only for looks*/
  text-align: center;
  padding: 5px;
}
<div id="container">
  <div>Left Side</div>
  <div>I want this centered</div>
  <div>Right Side (Extra text for extra length)</div>
</div>

解决方案

You can use margins to approximate centering. But in order to get perfect centering with flexbox that's consistent across a variety of viewports, you'll have to slightly modify your HTML somewhat.

You need to turn the direct children of #container into flex containers themselves with a display:inline-flex declaration and give them a flex value of 1 and justify-content: center.

From there, you add your content into child divs. To get alignment on the left and right divs, use margin-right: auto and margin-left: auto, respectively.

#container {
  display: flex;
  background-color: lightgrey;
}
.flex {
  flex: 1;
  display: inline-flex;
  justify-content: center;
}
.flex > div {
  height: 100px;
  border: 2px dashed red;
  text-align: center;
  padding: 5px;
}
.left div {
  margin-right: auto;
}
.right div {
  margin-left: auto;
}
<div id="container">
  <div class="left flex">
    <div>Left Side</div>
  </div>
  <div class="center flex">
    <div>I want this centered</div>
  </div>
  <div class="right flex">
    <div>Right Side (Extra text for extra length)</div>
  </div>
</div>

这篇关于保持一个元素居中在flexbox中不同宽度的两个元素之间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-15 16:42