javascript - 添加文本并将其对齐到自定义 Electron 菜单栏 CSS

Question

所以我有以下用于菜单栏的 CSS 和 HTML:

<header>
   <div id="name">Unnamed Masterpiece</div>
   <div id="close" onclick="closeWindow()">✕</div>
   <div id="min" onclick="minWindow()">―</div>
</header>

header {
    display: flex;
    justify-content: flex-start;
    -webkit-app-region: drag;
    background: #292929;
    flex-direction: row-reverse;
}

其中，带有单独样式的关闭和最小化标志给了我以下内容:

但是我希望标题位于最左侧并居中。

我该怎么做？

Answer 1

无需更改已有的 HTML 或 CSS，您可以将其添加到 CSS 中:

#name {
 flex: 1;
 text-align: center;
 order: 1;
}
#close, #min {
  order: 0;
}

它将改变元素的顺序，使文本变大并将其居中。