3列固定标题,扩展高度以适合内容

Question

我正在尝试在页面顶部创建一个具有3个"列"的固定标题.第一个在左侧左对齐,第二个相对于整个页面居中- 无论其他两个列大小,第三个是右对齐,卡在右侧.我希望所有内容都垂直居中.

浮标并没有真正起作用,因为中间列没有正确居中.所以我position: absolute在左边和右边使用了两个div,并在中间留下了一个div.

我的问题是我无法扩展标题以包含左侧div,它更高,我无法将内容垂直居中.

我究竟做错了什么？谢谢!

这是我的代码:

.header {
  z-index: 8;
  top: 0;
  left: 0;
  position: fixed;
  padding-top: 1rem;
  padding-bottom: 1rem;
  width: 100%;
  background: white;
  z-index: 8;
  border-bottom: 1px solid black;
  text-align: center;
}

.left {
  position: absolute;
  top: 1rem;
  left: 1rem;
  border: 1px solid gray;
  background: red;
  padding: 1rem;
  height: 10rem;
}

.right {
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: yellow;
  border: 1px solid gray;
}

.middle {
  background: green;
  border: 1px solid gray;
}

<div class="header">
  <div class="left">Left</div>
  <div class="middle">MIDDLE......</div>
  <div class="right">Right</div>
</div>

这是我小提琴的链接.

Answer 1

我建议使用flexbox进行垂直对齐.

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header>div {
  padding: 1rem; /* To improve visibility */
  width: calc(100% / 3);
}

.col1 {
  text-align: left;
}

.col2 {
  text-align: center;
}

.col3 {
  text-align: right;
}

<header>
  <div class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
  <div class="col3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</header>