HTML和CSS對齊問題

Question

我正在嘗試獲取h1標簽天文本“今天，星期二，星期三，星期四”，以使其直接在其上方的雲圖像下方和中心對齊， 請參見Image 。 我覺得我已經嘗試了所有方法，但無法完全將其正確放置。 代碼如下。 我試過讓它們在同一div內，但無濟於事。

 .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應該提供一個簡單的解決方案...

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