问题描述
我正在制作一个音乐播放控制器,容器有 3 个部分:左、中和右.但是,由于左侧和右侧的宽度不同,中心部分不在 div 的真正中心,但我需要它.我正在使用 flexbox 的 space-between
选项来布局项目.
#container {显示:弹性;对齐内容:间隔;背景颜色:浅灰色;}#容器>div {高度:100px;边框:2px 红色虚线;/*这只是为了外观*/文本对齐:居中;填充:5px;}
<div>左侧</div><div>我想要这个居中</div><div>右侧(用于额外长度的额外文本)</div>
您可以使用边距来近似居中.但是为了让 flexbox 在各种视口中保持一致的完美居中,你必须稍微修改你的 HTML.
您需要使用 display:inline-flex
声明将 #container
的直接子级变成 flex 容器,并给它们一个 flex
1
和 justify-content: center
的值.
从那里,您将您的内容添加到子 div 中.要在左右 div 上对齐,请分别使用 margin-right: auto
和 margin-left: auto
.
#container {显示:弹性;背景颜色:浅灰色;}.柔性 {弹性:1;显示:inline-flex;对齐内容:居中;}.flex >div {高度:100px;边框:2px 红色虚线;文本对齐:居中;填充:5px;}.left div {右边距:自动;}.right div {左边距:自动;}
<div class="left flex"><div>左侧</div><div class="center flex"><div>我想要这个居中</div>
<div class="right flex"><div>右侧(用于额外长度的额外文本)</div>