How I can center the Title in this Titlebar? - html

Question

I need help :)
There is a screenshot of my Electron app. I work on the title bar but I want to center the title, how I can do that, thanks you guys! And as I'm a beginner I don't know if this method to do a Title bar is good, can you say if this is good ?
(And if I can abuse your kindness, how I can do the double button with "valider", it will be useful to me for the future.
Thank you again very much!
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

Update you css with below code.
#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

You need add "text align center"
#title-bar > #title {
display: inline-block;
color: #f8f4f4;
text-align: center;
}
complement the answer ...
You can apply text-align:center; to the parent block and apply float: left to the first button.