html - 如何将标题放在此标题栏中？

Question

我需要帮助 :)
有我的Electron应用程序的屏幕截图。我在标题栏上工作，但我想使标题居中，我该怎么做，谢谢大家!而且，由于我是初学者，所以我不知道这种做标题栏的方法是否好，您能说这是否好吗？
(而且，如果我可以滥用您的好心，以及如何使用“valider”(确认)来完成双键操作，则对将来的我很有用。

再次非常感谢!

What I want to do

Screen of the begin

HTML:

<div id="title-bar">
      <button id="close-btn" class="tb-buttons">
        <img src="Images/Close.png" />
      </button>
      <p id="title">CharactersPalette</p>
      <button id="eye-btn" class="tb-buttons">
        <img src="Images/Hide.png" />
      </button>
      <button id="min-btn" class="tb-buttons">
        <img src="Images/Min.png" />
      </button>
    </div>

CSS:

/* ~~~~~~~~~~~~~ TitleBar ~~~~~~~~~~~~ */
* {
  margin: 0px;
  padding: 0px;
  border: 0px;
  -webkit-user-select: none;
  -webkit-app-region: no-drag;
}
#title-bar {
  width: 100%;
  height: 30px;
  -webkit-app-region: drag;
  background-color: #21252b;
}
#title-bar > button {
  height: 30px;
  width: 34px;
  display: inline-block;
  background: transparent;
  outline: none;
  transition: 0.15s linear;
}
#title-bar > button:hover {
  background-color: #d52015;
}
#title-bar > #title {
  display: inline-block;
  color: #f8f4f4;
}
#title-bar > #eye-btn,
#title-bar > #min-btn {
  height: 30px;
  width: 34px;
  display: inline-block;
  background: transparent;
  float: right;
  transition: 0.15s linear;
}
#title-bar > #eye-btn:hover,
#title-bar > #min-btn:hover {
  background-color: #3e4146;
}
#title-bar > button > img {
  height: 18px;
  width: 18px;
  vertical-align: middle;
}

Answer 1

使用以下代码更新您的CSS。

#title-bar {
    width: 100%;
    height: 30px;
    -webkit-app-region: drag;
    background-color: #21252b;
    display: flex;            /* Add this */   
    align-items: center;      /* Add this */
}

#title-bar > #title {
    display: inline-block;
    color: #f8f4f4;
    margin: 0 auto;           /* Add this */
}