html - 如何使用 flexbox 使中间元素始终完美居中

<分区>

看看下面的例子，我的目标是让中间项始终居中——直接居中在容器 div 中。然后让左右元素与容器的最左边和最右边对齐。

下面是我为容器设计的样式，但是它仍然在元素之间放置均匀的空间，因此中间元素不会停留在确切的中间。与右侧和中间元素相比，我想要的是在左侧和中间元素之间留出更多空间 - 但中间元素再次始终居中

我如何实现这一目标？

display: flex;
  justify-content: center;
  align-items: center;

  .left {
    margin-right: auto;
    justify-self: center;
    align-self: center;
  }

  .right {
    margin-left: auto;
    justify-self: center;
    align-self: center;
  }

Example Image

最佳答案

您可以在父容器上使用justify-content: space-between;。

.parentContainer {
 display: flex;
 justify-content: space-between;
}

<div class="parentContainer">
 <div class="left">1</div>
 <div class="middle">2</div>
 <div class="right">3</div>
</div>

关于html - 如何使用 flexbox 使中间元素始终完美居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54332537/

上一篇：javascript - 如何防止覆盖/标题在网站上再次显示

下一篇：javascript - 将数据从 HTML 传输到外部 Javascript 代码

相关文章：

html - 固定 div 上的滚动条在底部被截断。有 fiddle 给你看

html - 如何在表格标题中双击禁用蓝色选择？

html - 所有导航菜单项中文本的左右间距相等

javascript - Polymer如何使用Core-TransitionEnd

javascript - 使图像适合 IE 窗口

javascript - 如何更改页面滚动的元素样式？

javascript - HTML/CSS 网站格式

css - Sass/Compass 缩小 CSS 并进行快速更改

css - 使用 node-sass 编译 SCSS 时出现 undefined variable 错误

javascript - 将按钮插入到内容脚本的 DOM 中