HTML and CSS alignment issue

Question

I'm trying to get the h1 tag days text 'Today, Tues, Weds, Thur' to align directly underneath and in the centre of the cloud images above it See Image. I've feel like I've tried everything but cant quite get it to position properly. The code is below. I've tried having them within the same div but to no avail.

.bottom h1 {
  font-size: 18px;
  font-weight: 700;
}

.bottom .weather img {
  display: inline-block;
}

.bottom .weatherdays h1 {
  font-size: 18px;
  font-weight: 700;
  display: inline-block;
  margin-right: 12px;
  margin-left: 18px;
}

.bottom .weatherdays .today {
  padding-left: 2px;
}

.bottom .weatherdays .tue {
  padding-left: 2px;
}

.bottom .weatherdays .wed {
  padding-right: 5px;
  padding-left: 5px;
}

.bottom .weatherdays .thur {
  padding-right: 5px;
  padding-left: 5px;
}

@media only screen and (max-width: 531px) {
  .bottom .weather img {
    max-width: 30px;
    margin-right: 3px;
    margin-left: 5px;
  }
  .bottom .weatherdays h1 {
    font-size: 10px;
    margin-right: 8px;
    margin-left: 10px;
  }
}

<h1>Weather</h1>
<div class="weather">
  <img src="images/bigcloud.png" alt="Big Cloud" />
  <img src="images/smallcloud.png" alt="Small Cloud" />
  <img src="images/smallcloud.png" alt="Small Cloud" />
  <img src="images/smallcloud.png" alt="Small Cloud" />
</div>
<div class="weatherdays">
  <h1 class="today">TODAY</h1>
  <h1 class="tue">TUE</h1>
  <h1 class="wed">WED</h1>
  <h1 class="thur">THUR</h1>
</div>

Answer 1

Flexbox should provide a simple solution...

.bottom h1 {
  font-size: 18px;
  font-weight: 700;
}

.bottom .weather img {
  display: inline-block;
}

.bottom .weatherdays h1 {
  font-size: 18px;
  font-weight: 700;
  display: inline-block;
  margin-right: 12px;
  margin-left: 18px;
}

.bottom .weatherdays .today {
  padding-left: 2px;
}

.bottom .weatherdays .tue {
  padding-left: 2px;
}

.bottom .weatherdays .wed {
  padding-right: 5px;
  padding-left: 5px;
}

.bottom .weatherdays .thur {
  padding-right: 5px;
  padding-left: 5px;
}

@media only screen and (max-width: 531px) {
  .bottom .weather img {
    max-width: 30px;
    margin-right: 3px;
    margin-left: 5px;
  }
  .bottom .weatherdays h1 {
    font-size: 10px;
    margin-right: 8px;
    margin-left: 10px;
  }
}

div.weather,
div.weatherdays {
  display: flex;
}

div.weather > *,
div.weatherdays > * {
  flex: 25%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

<h1>Weather</h1>
<div class="weather">
  <div><img src="http://via.placeholder.com/150x120" alt="Big Cloud" /></div>
  <div><img src="http://via.placeholder.com/120x100" alt="Small Cloud" /></div>
  <div><img src="http://via.placeholder.com/120x100" alt="Small Cloud" /></div>
  <div><img src="http://via.placeholder.com/120x100" alt="Small Cloud" /></div>
</div>
<div class="weatherdays">
  <h1 class="today">TODAY</h1>
  <h1 class="tue">TUE</h1>
  <h1 class="wed">WED</h1>
  <h1 class="thur">THUR</h1>
</div>