Centering navbar title in center of screen [duplicate] - html

Question

This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 2 years ago.
I'm trying to center the title of the navbar in the middle of the screen. Is there a way to do this without custom margin/padding values (trying to keep it responsive)?
In the image below, I want to center "Title text goes here" in the middle of the screen.
<header>
<nav class="nav">
<img class="nav-logo" src="./jumbotron.jpg" alt="logo">
<h1 class="nav-title">Title text goes here</h1>
<ul class="nav-links">
<li class="nav-link">nav link 1</li>
<li class="nav-link">nav link 2</li>
<li class="nav-link">nav link 3</li>
</ul>
</nav>
</header>
/*****************************************************************************/
/* Navbar */
/*****************************************************************************/
.nav {
display: flex;
flex-direction: row;
justify-content: center;
background-color: white;
}
.nav-logo {
width: 10%;
}
.nav-title {
flex: 1;
margin: auto 0;
text-align: center;
font-size: 30px;
}
.nav-links {
flex: 0.5;
display: flex;
width: 100%;
padding: 20px;
justify-content: flex-end;
list-style: none;
}

Answer 1

You can achieve this with flexbox. By setting align-items to stretch on the header and flex-grow to 1 on the title, the title will expand to cover whatever space is unoccupied by the logo and the links. Then, text-align:center will center your title's text:
.nav {
display: flex;
flex-direction: row;
align-items: stretch
background-color: white;
}
.nav-logo {
width: 10%;
}
.nav-title {
flex-grow: 1;
margin: auto 0;
text-align: center;
font-size: 30px;
text-align: center;
}
.nav-links {
display: flex;
width: 100%;
padding: 20px;
justify-content: flex-end;
list-style: none;
}