Why is this text not aligned vertically to my CSS grid row? - html

Question

My website will have information on the temperature and I am hoping to have a read out of temperature followed by a degree sign and either 'C' or 'F'. There is other information on the page about the weather, so I am using CSS grid to layout the page and break all of the sections up. When I make the degree note font size smaller, the degree moves higher on the page. I would like it to be aligned with the temperature value, but I can't figure out whats going on in the page. Any assistance would be amazing.
Photograph of the problematic text:
.wrapper {
display: grid;
grid-template-rows: 200px 100px;
padding-bottom: 2.5em;
}
.temp {
display: grid;
grid-template-columns: 150px 150px;
padding: none;
font-size: 3em;
align-content: center;
justify-content: center;
}
.degree-note {
font-size: 30px;
align-content: center;
}
<div class="wrapper">
<img class='loading-text' src='img/weather-app-loading.png'>
<div class='temp'>
<h2 class='temp-degree'>34</h2>
<h2 class='degree-note'>&deg C</h2>
</div>
</div>

Answer 1

Use CSS flex-box instead.
It's much more flexible and responsive than CSS grid.
Just run the code snippet you'll see.
.wrapper {
display: flex;
flex-direction: column;
padding-bottom: 2.5em;
}
.temp {
align-items: center;
display: flex;
font-size: 3em;
padding: none;
}
.temp-symbol {
align-self: flex-start;
font-size: 30px;
}
<div class="wrapper">
<img class='loading-text' alt="your image" src='img/weather-app-loading.png'>
<h2 class='temp'>
<span class='temp-number'>34</span>
<span class='temp-symbol'>&deg C</span>
</h2>
</div>

Answer 2

H2 tag will break line. Use instead span tag to add a specific class to text.
.wrapper {
display:grid;
grid-template-rows: 200px 100px;
padding-bottom: 2.5em;
}
.temp{
position: relative;
display:grid;
grid-template-columns: 150px 150px;
padding: none;
font-size: 3em;
align-content: center;
justify-content: center;
}
.degree-note {
position: absolute;
top: 1rem;
font-size: 30px;
align-content: center;
}
<div class="wrapper">
<img class='loading-text' src='img/weather-app-loading.png'></img>
<div class='temp'>
<h2>
<span class='temp-degree'>34</span>
<span class='degree-note'>&deg C</span>
</h2>
</div>
</div>

Answer 3

Headings normally come with default margins. Remove those margins from your h2 elements. That should get you where you want to go.
Then, for more precision, set an equal line height for the content.
Add this to your code:
.temp {
line-height: 1; /* inherits to children */
}
.temp-degree {
margin: 0; /* remove default margin */
text-align: right; /* optional; eliminates gap between elements */
}
.degree-note {
margin: 0; /* remove default margin */
}
.wrapper {
display: grid;
grid-template-rows: 200px 100px;
padding-bottom: 2.5em;
}
.temp {
display: grid;
grid-template-columns: 150px 150px;
font-size: 3em;
align-content: center;
justify-content: center;
line-height: 1; /* inherits to children */
}
.temp-degree {
margin: 0; /* remove default margin */
text-align: right;
}
.degree-note {
font-size: 30px;
margin: 0; /* remove default margin */
}
<div class="wrapper">
<img class='loading-text' src='img/weather-app-loading.png'>
<div class='temp'>
<h2 class='temp-degree'>34</h2>
<h2 class='degree-note'>&deg C</h2>
</div>
</div>