我怎样才能在导航中将站点 header 置于随机宽度的 suff 周围？

Question

我想要的和这个程序差不多header,

标题完全居中，尽管旁边的东西的宽度是随机的。是的，如果我当然不是在制作软件，但我仍然想要几乎这种随机的东西并且仍然标题必须整齐居中

Please, Don't give me advice like 'Just use grid/flex'
Instead, Tell me how am i gonna use the grid/flex to center it ?? (I am trying and ,,, still Cant solve it.)

Answer 1

Flexbox 不会真正起作用，因为标题必须在整个 header 中居中——而不是在左右之间剩余的 space 中项目。不过，您可以使用 flexbox 将 left/right 项目固定到各自的角落。对于标题，在相对容器内使用绝对定位（header）。

header {
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: #333;
  color: #fdfdfd;
  padding: 0.5rem;
}

.title {
  position: absolute;
  left: 50%;
  transform: transalteX(-50%); 
}

<header>
  <div class="left">
    <span>item</span>
    <span>longer item here</span>    
  </div>
  <div class="title">title</div>
  <div class="right">
    <span>item</span>
    <span>item</span>    
  </div>
</header>

Answer 2

你可以使用 position: absolute; 和 left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

但在这种情况下，您必须使用任何可能的宽度测试您的应用程序，以确保文本不会在另一个上方显示

.nav {
  width: 100%;
  height: 45px;
  background: #212121;
  position: relative;
}

p {
  display: inline-block;
  color: #f1f2f3;
  padding: 0 10px;
}

p.left {
  float: left;
}

p.right {
  float: right;
}

.center {
  position: absolute;
  padding: 0;
  margin: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%)  translateY(-50%)
}

<div class="nav">
    <p class="left">stuff</p>
    <p class="center">center</p>
    <p class="right">stuff</p>
    <p class="right">stuff</p>
</div>

我怎样才能在导航中将站点 header 置于随机宽度的 suff 周围？

How can i center site header in nav with random width of suff around?

html

css

web-deployment

web