html - 如何在 HTML 中混合居中对齐和左对齐

Question

我有一个 HTML 页面顶部仪表板的设计，它具有以下要求:

• 一切都应在仪表板内垂直居中。
• 它的正中央应该有一个按钮。
• 文本应在 25% 和 75% 标记处居中。
• 它应该有最后一组文本一直到左边。

像这样，但不要用可怕的颜色:

我能够使用 display: flex 并为所有内容提供适当的大小来实现(或非常接近)前三个目标，如下所示:

HTML:

<div class="header">
    <span class="left-text">LEFT TEXT</span>
    <button class="button">BUTTON</button>
    <span class="right-text">RIGHT TEXT</span>
</div>

CSS:

.header {
    position: absolute;
    top: 55px;
    height: 40px;
    width: 100%;
    background-color: beige;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.button {
    height: 26px;
    width: 100px;
    order: 2;
    flex-grow: 0;
}

.left-text {
    order: 1;
    flex-grow: 1;
    text-align: center;
}

.right-text {
    order: 3;
    flex-grow: 1;
    text-align: center;
}

不过，这最后一个要求真的让我陷入了困境；没有一切都很好和居中，我觉得 flex 需要一些丑陋的调整。我觉得如果我可以将 div 或 span 元素按我喜欢的方式在彼此之上分层，这会容易得多，但有些事情告诉我我不能。这个问题有什么好的解决方案吗？我接近了吗？

编辑:添加模型图像。

Answer 1

希望这对您有用，基本上它添加了 more-left 类并将其定位到相对于 header 的位置，并且您可以根据需要将其移动到左侧，什么都合适。

HTML

<div class="header">
    <span class="more-left">MORE LEFT</span>
    <span class="left-text">LEFT TEXT</span>
    <button class="button">BUTTON</button>
    <span class="right-text">RIGHT TEXT</span>
</div>

CSS

.header {
    position: absolute;
    top: 55px;
    height: 40px;
    width: 100%;
    background-color: beige;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.button {
    height: 26px;
    width: 100px;
    order: 2;
    flex-grow: 0;
}

.left-text {
    order: 1;
    flex-grow: 1;
    text-align: center;
}

.right-text {
    order: 3;
    flex-grow: 1;
    text-align: center;
}
.more-left {
    position: relative;
    left: 15%; /* adjust as neccessary */
}