Как я могу центрировать Заголовок в этом заголовке?

Question

Мне нужна помощь :) Вот скриншот моего приложения Electron. Я работаю над строкой заголовка, но хочу центрировать заголовок, как я могу это сделать, спасибо вам, ребята! И поскольку я новичок, я не знаю, хорош ли этот метод для создания строки заголовка, можете ли вы сказать, хорош ли это? (И если я смогу оскорбить вашу доброту, как я могу сделать двойную кнопку с «valider», это будет полезно для меня на будущее.

Еще раз большое спасибо!

Что я хочу сделать

Экран начала

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 */
}

Answer 2

Вам нужно добавить «центр выравнивания текста»

#title-bar > #title {
  display: inline-block;
  color: #f8f4f4;
  text-align: center;
}

дополнить ответ ... Вы можете применить text-align: center;к родительскому блоку и примените float: left к первой кнопке.