html – 在flexbox中将一个元素放在两个不同宽度元素之间

概述我正在制作音乐播放控制器,容器有3个部分：左,中,右.但是,由于左侧和右侧的宽度不同,中心部分不在div的真正中心,但我需要它.我正在使用flexbox的space-between选项来布局项目. #container { display: flex; justify-content: space-between; background-color: lightgrey; 我正在制作音乐播放控制器,容器有3个部分：左,中,右.但是,由于左侧和右侧的宽度不同,中心部分不在div的真正中心,但我需要它.我正在使用flexBox的space-between选项来布局项目.

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

解决方法 您可以使用边距来近似居中.但是为了在各种视口中保持一致的flexBox完美居中,你必须稍微修改一下你的HTML.

您需要使用display：inline-flex声明将#container的直接子项转换为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 dashed red;  text-align: center;  padding: 5px;}.left div {  margin-right: auto;}.right div {  margin-left: auto;}

<div ID="container">  <div >    <div>left SIDe</div>  </div>  <div >    <div>I want this centered</div>  </div>  <div >    <div>Right SIDe (Extra text for extra length)</div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 在flexbox中将一个元素放在两个不同宽度元素之间全部内容，希望文章能够帮你解决html – 在flexbox中将一个元素放在两个不同宽度元素之间所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。