CSS - 如果有足够的空间则居中元素

Question

我正在开发一个菜单栏，其中心设计有徽标/徽章。这在当前情况下效果很好（桌面上有一些项目），但如果屏幕缩放或菜单选项数量增加，徽标就会放在菜单按钮后面。

我目前使其更加强大的方法是（从字面上看）通过缩放徽标/徽章并将其移出菜单栏并移至菜单栏上方来回避问题。

但理想情况下，我会将其保留在菜单栏的“中间”，菜单选项之间。有人知道如何做到这一点吗？最好只使用 CSS。

澄清一下：我希望星星在较大屏幕上位于菜单栏的中心，并在较小屏幕上位于剩余空间的中间。所以仅仅使用 Flexbox 并不是一个（完整的）解决方案。对于固定的内容，我可以使用断点，但是对于可能更改的内容，无法预测所需的断点。

Answer 1

您理想的解决方案（或至少是非常接近的解决方案）可以通过弹性布局实现。这个想法是只要有足够的空间，就保持左右部分的宽度相等。这可以通过将左右部分的 flex-basis 设置为大于其内容大小的值来完成 - 这样它就不会受到内容的影响，并且一切都会对称。

在此演示中，您可以将主体悬停以过渡到较小的宽度。黑线显示了身体的确切中心。

.header {
  display: flex;
}

.start,
.end {
  /* this value should be larger than the minimum width on a "large" screen
     if it is, the content width will not determine the actual width, so start
     and end part will be of the same size -> the middle is centered
     using 50% - 50px here so we're neither growing nor shrinking if there is
     enough space (50px is half the middle width)
   */
  flex: calc(50% - 50px) 1;
}

.middle {
  /* this flex-basis is kind of the targeted width of the middle part within
     the star will be centered. Giving the middle a larger flex-basis than its
     contents prevents the contents from touching the left part even there is
     still ample space to the right
     Once the middle "bumped" to start/end, the middle will shrink, but it will
     still remain a space toward start/end as long as possible
   */
  flex: 100px 1;
}


.middle {
  text-align: center;
}

.end {
  text-align: end;
}

.start,
.middle,
.end {
  /* wraping would reduce the minimum width, don't want that */
  white-space: nowrap;
}


/* ---
 * these rules here are just for the demo, not for the layout
 * ---
 */

.start,
.middle,
.end,
{
  /* increase legibility without affecting horizontal layout */
  padding: 10px 0;
}

.center-line {
  width: 50%;
  border-right: 2px solid black;
  /* center on the border */
  margin-left: -1px;
  height: 30px;
}

html,
body {
  padding: 0;
  margin: 0;
}

.page {
  padding: 10px;
}

.middle {
  background: rgba(0, 0, 0, 0.1);
}

/* transition on hover */

.page {
  transition: width 1s ease-in-out;
  width: 500px;
  background: rgba(0, 0, 0, 0.1);
}

:hover .page {
  width: 250px;
}

<div class="page">
  <div class="header">
    <div class="start">Button Button Button</div>
    <div class="middle">*</div>
    <div class="end">Button</div>
  </div>
  <div class="center-line"></div>
</div>

这是中间宽度未知的变体。唯一的问题是，如果整个容器不适合，它会溢出弹性容器。如果你告诉中间它可以收缩（例如min-width: 0; overflow: hidden;），那么一旦开始/结束部分收缩，并且一旦内容被剪裁，它就会收缩。

.header {
  display: flex;
  column-gap: 20px;
}

.start,
.end {
  /* this is no longer exact - */
  flex: 30%;
}

.middle {
  /* this flex-basis is kind of the targeted width of the middle part within
     the star will be centered. Giving the middle a larger flex-basis than its
     contents prevents the contents from touching the left part even there is
     still ample space to the right
     Once the middle "bumped" to start/end, the middle will shrink, but it will
     still remain a space toward start/end as long as possible
   */
  flex: 1;
}


.middle {
  text-align: center;
}

.end {
  text-align: end;
}

.start,
.middle,
.end {
  /* wraping would reduce the minimum width, don't want that */
  white-space: nowrap;
}


/* ---
 * these rules here are just for the demo, not for the layout
 * ---
 */

.start,
.middle,
.end,
{
  /* increase legibility without affecting horizontal layout */
  padding: 10px 0;
}

.center-line {
  width: 50%;
  border-right: 2px solid black;
  /* center on the border */
  margin-left: -1px;
  height: 30px;
}

html,
body {
  padding: 0;
  margin: 0;
}

.page {
  padding: 10px;
}

.middle {
  background: rgba(0, 0, 0, 0.1);
}

/* transition on hover */

.page {
  transition: width 2s linear;
  width: 700px;
  background: rgba(0, 0, 0, 0.1);
}

:hover .page {
  width: 300px;
}

<div class="page">
  <div class="header">
    <div class="start">Button Button Button</div>
    <div class="middle">This is the page title</div>
    <div class="end">Button</div>
  </div>
  <div class="center-line"></div>
</div>