center an item in a div by ignoring other elements - html

Question

I want to create a header bar and center my title / logo but it's not centered perfectly.
body {
margin: 0;
background: black;
}
.link {
text-decoration: none;
}
#header {
height: 80px;
display: flex;
align-items: center;
background-color: #000000;
}
#headerTitleContainer {
margin: 0 auto;
}
#headerTitle {
color: #97d700;
}
#menuBtnContainer {
display: inline-block;
cursor: pointer;
margin-right: 10px;
}
#media (min-width: 300px) {
#menuBtnContainer {
margin-left: 20px;
}
}
#media (max-width: 299px) {
#menuBtnContainer {
margin-left: 5px;
}
}
.menuIconBar {
width: 35px;
height: 5px;
margin: 6px 0 6px 0;
transition: 0.4s;
background-color: #97d700;
}
<div id="header">
<div id="menuBtnContainer">
<div class="menuIconBar" id="menuIconBar1"></div>
<div class="menuIconBar" id="menuIconBar2"></div>
<div class="menuIconBar" id="menuIconBar3"></div>
</div>
<div id="headerTitleContainer">
<h1><a class="link" id="headerTitle" href="/">MyTitle</a></h1>
</div>
</div>
As you can see MyTitle is not centered correctly. How can I do this? I achieve it when taking out my menu button but obviously I need this button. I just want it to be always in the center of the bar. But it should not overlap the menu button.
That's why I added a margin-right: 10px; to my menu button.

Answer 1

One solution it to make width of button 0 and have overflow:visible on it:
body {
margin: 0;
background: black;
}
.link {
text-decoration: none;
}
#header {
height: 80px;
display: flex;
align-items: center;
background-color: #000000;
}
#headerTitleContainer {
margin: 0 auto;
}
#headerTitle {
color: #97d700;
}
#menuBtnContainer {
display: inline-block;
cursor: pointer;
width: 0;
overflow: visible;
}
#media (min-width: 300px) {
#menuBtnContainer {
margin-left: 20px;
margin-right:-20px;
}
}
#media (max-width: 299px) {
#menuBtnContainer {
margin-left: 5px;
}
}
.menuIconBar {
width: 35px;
height: 5px;
margin: 6px 0 6px 0;
transition: 0.4s;
background-color: #97d700;
}
<div id="header">
<div id="menuBtnContainer">
<div class="menuIconBar" id="menuIconBar1"></div>
<div class="menuIconBar" id="menuIconBar2"></div>
<div class="menuIconBar" id="menuIconBar3"></div>
</div>
<div id="headerTitleContainer">
<h1><a class="link" id="headerTitle" href="/">MyTitle</a></h1>
</div>
</div>
Or simply make the button absolute position without chaging any other property and don't forget to make the parent position:relative (I prefer this one):
body {
margin: 0;
background: black;
}
.link {
text-decoration: none;
}
#header {
height: 80px;
display: flex;
align-items: center;
background-color: #000000;
position:relative;
}
#headerTitleContainer {
margin: 0 auto;
}
#headerTitle {
color: #97d700;
}
#menuBtnContainer {
display: inline-block;
cursor: pointer;
margin-right: 10px;
position: absolute;
}
#media (min-width: 300px) {
#menuBtnContainer {
margin-left: 20px;
margin-right:-20px;
}
}
#media (max-width: 299px) {
#menuBtnContainer {
margin-left: 5px;
}
}
.menuIconBar {
width: 35px;
height: 5px;
margin: 6px 0 6px 0;
transition: 0.4s;
background-color: #97d700;
}
<div id="header">
<div id="menuBtnContainer">
<div class="menuIconBar" id="menuIconBar1"></div>
<div class="menuIconBar" id="menuIconBar2"></div>
<div class="menuIconBar" id="menuIconBar3"></div>
</div>
<div id="headerTitleContainer">
<h1><a class="link" id="headerTitle" href="/">MyTitle</a></h1>
</div>
</div>
Another solution is to add a third hidden element using :after taking the same width as the button so the title get centered :
body {
margin: 0;
background: black;
}
.link {
text-decoration: none;
}
#header {
height: 80px;
display: flex;
align-items: center;
background-color: #000000;
}
#header:after {
content: "";
width: 35px;
margin-left: 10px;
}
#headerTitleContainer {
margin: 0 auto;
}
#headerTitle {
color: #97d700;
}
#menuBtnContainer {
display: inline-block;
cursor: pointer;
margin-right: 10px;
}
#media (min-width: 300px) {
#menuBtnContainer {
margin-left: 20px;
}
#header:after {
margin-right: 20px;
}
}
#media (max-width: 299px) {
#menuBtnContainer {
margin-left: 5px;
}
}
.menuIconBar {
width: 35px;
height: 5px;
margin: 6px 0 6px 0;
transition: 0.4s;
background-color: #97d700;
}
<div id="header">
<div id="menuBtnContainer">
<div class="menuIconBar" id="menuIconBar1"></div>
<div class="menuIconBar" id="menuIconBar2"></div>
<div class="menuIconBar" id="menuIconBar3"></div>
</div>
<div id="headerTitleContainer">
<h1><a class="link" id="headerTitle" href="/">MyTitle</a></h1>
</div>
</div>