CODEWITHSUNDEEP
htmlcssfrontendcss-grid
user10433884
user10433884

Reputation:

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

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:

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>

Upvotes: 1

Views: 1370

Answers (5)

J K
J K

Reputation: 1

instead of :

justify-content:center; and align-content:center;

do this instead,

align-content:center; and text-align:center;

I just had this same issue and came to this conclusion.

Upvotes: 0

Nizamuddin Shaikh
Nizamuddin Shaikh

Reputation: 420

I think a simple solution would be as under:

.wrapper {
    font-size: 30px;
}
 <div class="wrapper">
    34&deg;<sup>C</sup>
 </div>

Upvotes: 0

PatMan10
PatMan10

Reputation: 608

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>

Upvotes: 2

Michael Benjamin
Michael Benjamin

Reputation: 371699

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 */
}

enter image description here

.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>

Upvotes: 0

Melchia
Melchia

Reputation: 24294

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>

Upvotes: 0

Related Questions