Centering an h1 based on outside nav - html

Question

I have an h1 inside a nav that is currently centering based on the width of the h1. How would I use text-align so that the title is centered based on the width of the nav?
Here is my HTML and CSS:
* {
margin: 0;
padding: 0;
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
}
h1 a {
text-decoration: none;
color: inherit;
}
.logo {
height: 100%;
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
margin: 15px 0;
color: white;
font-size: 44px;
line-height: 55px;
flex: 1 0 auto;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1> The Novel Column </h1>
</nav>
Thank you in advance for your help!

Answer 1

You can set your nav to have a position of relative which means that any inside absolute element will be within the bounds of this element. Then set the h1 to have a position of absolute this will remove the element from the normal flow of the page and have it flow with the parent element with the position of relative. From there you can center it using margin: 15px auto;, left: 0 and right: 0 this will make the h1 element 100% width of the nav thus centering it correctly.
* {
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
margin: 0;
padding: 0;
}
h1 a {
color: inherit;
text-decoration: none;
}
.logo {
height: 100%;
}
nav {
background-color: black;
display: flex;
height: 90px;
position: relative;
width: 100%;
}
nav h1 {
color: white;
flex: 1 0 auto;
font-size: 44px;
left: 0;
line-height: 55px;
margin: 15px auto;
position: absolute;
right: 0;
text-align: center;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1> The Novel Column </h1>
</nav>
Now this method also has its fallback, you will lose the ability to click on the logo, but this can be remedied by setting a position of relative and z-index: 2 so the logo element will be higher up than the h1 making it clickable.

Answer 2

Flexbox is perfect approach, and you were nearly there.
I added an empty div with class .ghost to act as a counter balance to the logo. Since I know the logo is 90px wide I set the ghost div to the same, and both the ghost div and the logo get similar flex settings:
.logo {
height: auto;
width: 90px;
flex: 0 0 90px; // same
}
.ghost {
width: 90px;
flex: 0 0 90px; // same
}
Now, with the <h1> allowed to grow (flex: 1 0 auto), it will take up all the rest of the space naturally and remain perfectly centered thanks to the ghost div flanking the right side.
* {
margin: 0;
padding: 0;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
}
h1 a {
text-decoration: none;
color: inherit;
}
.logo {
height: auto;
width: 90px;
flex: 0 0 90px;
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
margin: 15px 0;
color: white;
font-size: 44px;
line-height: 55px;
flex: 1 0 auto;
}
.ghost {
width: 90px;
flex: 0 0 90px;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1>The Novel Column</h1>
<div class="ghost"><!-- nothing here --></div>
</nav>