如何在此标题栏中将标题居中？答案

【问题标题】：How I can center the Title in this Titlebar?如何在此标题栏中将标题居中？
【发布时间】：2020-03-05 23:10:54
【问题描述】：

我需要帮助 :) 有我的电子应用程序的屏幕截图。我在标题栏上工作，但我想将标题居中，我该怎么做，谢谢你们！由于我是初学者，我不知道这种做标题栏的方法是否好，你能说这好不好？（如果我能滥用你的好意，我怎么能用“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;
}

【问题讨论】：

标签： html css electron

【解决方案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 */
}

【讨论】：

这救了我的命 :D 非常感谢！但标题在标题栏的顶部它是居中的......
添加对齐项：#title-bar 的中心
我更新了我的代码。请在您的代码中更新相同，它工作 100%

【解决方案2】：

您需要添加“文本居中对齐”

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

补充答案... 您可以应用 text-align:center;到父块并应用 float: left 到第一个按钮。

【讨论】：

是否支持flex？