HTML与CSS对齐问题：h1文本无法居中对齐至云图片下方

Hey there! Let's get that date text perfectly centered directly below your cloud image—it's totally doable with a few CSS adjustments. From what you've shared, it sounds like you're just missing some layout rules to lock the alignment in place.

First, Let's Assume Your HTML Structure Looks Something Like This #

(If yours is a bit different, the CSS tweaks will still apply with minor adjustments!)

<div class="bottom">
  <div class="weather">
    <img src="your-cloud-image.png" alt="Cloud icon">
    <div class="weatherdays">
      <h1>Today, Tues, Weds, Thur</h1>
    </div>
  </div>
</div>

Solution 1: Use Flexbox (Most Reliable & Simple) #

Flexbox makes vertical stacking and horizontal alignment a breeze. Update your CSS like this:

.bottom .weather {
  /* Turn the container into a flex box */
  display: flex;
  /* Stack elements vertically (image on top, text below) */
  flex-direction: column;
  /* Center all elements horizontally */
  align-items: center;
  /* Ensure text inside the h1 stays centered */
  text-align: center;
}

.bottom .weather img {
  /* Optional: Add some space between the image and text */
  margin-bottom: 8px;
  /* You can remove display: inline-block here—flex handles layout */
}

.bottom .weatherdays h1 {
  font-size: 18px;
  font-weight: 700;
  /* Remove inline-block and default h1 margins to clean up spacing */
  display: block;
  margin: 0;
}

Solution 2: No Flexbox? Use Block Elements & Auto Margins #

If you need to support older browsers, this method works too:

.bottom .weather {
  /* Center all inline/inline-block elements inside */
  text-align: center;
}

.bottom .weather img {
  /* Make the image a block element so text sits below it */
  display: block;
  /* Horizontally center the image */
  margin: 0 auto 8px;
}

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

Key Notes #

• The main idea is to wrap both the image and date text in a single container, then use CSS to center that container's contents vertically and horizontally.
• Removing default margins from the h1 will prevent unexpected spacing that throws off alignment.

内容的提问来源于stack exchange，提问作者James Duffield