My goal is to perfectly vertically align the title inside the navigation panel.
However, upon inspecting the screenshot images in an image viewer, I noticed a 1px gap at the bottom which makes the vertical alignment pixel-imperfect.
https://i.sstatic.net/8vCy4.png https://i.sstatic.net/JEs18.png
I attempted the following:
- Attempt: Used flexbox to vertically align H1 with a uniform distribution of bottom and top margin. Utilized
bootstrap 4utility classes. However, there was still a remaining 1px gap.
- Attempt: Used flexbox to vertically align H1 with a uniform distribution of bottom and top margin. Utilized
- Attempt: Set explicit height of 50px for the navigation panel. Tried setting
line-heighton the H1 element equal to the height of the navigation bar. With afont-sizeof13px, expected spacing above and below text to be (50px - 13px) / 2 = 18.5px. Still dealing with the issue of half pixels affecting the alignment.
- Attempt: Set explicit height of 50px for the navigation panel. Tried setting
- Attempt: Increased font size to fill the 1px gap, setting it to 14px. Expected remaining space after subtracting font size from the height to be divided uniformly between top and bottom spacing. No visible changes occurred.
It's apparent that a 1px font-size may not always equate to one physical pixel.
Is achieving perfect vertical alignment possible in this scenario? Could the issue lie with the font being used or the browser engine?
HTML snippet attempt 1:
<nav>
<div class="navbar navbar-expand-md p-0 pr-3 bg-dark align-items center">
<a href="#" class="navbar-brand p-0">
<img src="#" class="img-fluid" alt="...">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav w-100">
<h1 class="m-auto">
Air Quality Management System of the City of Olomouc
</h1>
<div class="flag-container">
<a class="mr-2" href="#">
<img class="img-fluid" src="#" alt="cs flag">
</a>
<a class="mr-2" href="#">
<img class="img-fluid active" src="#" alt="en flag">
</a>
</div>
</div>
</div>
</div>
</nav>
HTML snippet attempt 2:
<nav>
<div class="navbar navbar-expand-md p-0 pr-3 bg-dark align-items center">
... abrev. ...
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav w-100">
<h1 class="mx-auto my-0">
Air Quality Management System of the City of Olomouc
</h1>
... abrev. ...
</div>
</div>
</div>
</nav>
CSS snippet: Added extra CSS rules along with default ones from bootstrap 4.
nav .navbar-brand img {
max-height: 50px;
padding-left: .25rem;
background-color: #f10;
}
nav h1 {
color: #fff;
font-size: 13px;
font-size: .8125rem;
font-family: 'Hind';
letter-spacing: .15px;
text-transform: uppercase;
font-weight: 600;
text-align: center;
}
CSS snippet for attempt 2: Set line-height equal to the height of the navigation bar
nav h1 {
color: #fff;
font-size: 13px;
font-size: .8125rem;
font-family: 'Hind', sans-serif;
letter-spacing: .15px;
text-transform: uppercase;
font-weight: 600;
line-height: 50px;
}