cssで上下左右中央揃え。

6706 ワード
上下左右中央揃え Flex CSS 縦 CSS テキストリンク

この画像のように、縦横揃えたい。
でも意外と難しくてうまくいかない。
そんなflexを使いこなせていないあなたにプレゼント。

weather.html
<div id="weather-wrapper">
    <div id="weather1" class="weather-container">
        <div class="w33 centering">
            <div class="ma">hoge</div>
        </div>
        <div class="w33 centering">
            <img class="w100 ma" src="hoge.png" alt="心は晴れてます">
        </div>
        <div class="w33 centering">
            <div class="ma" style="color: #c5c5c5;">hoge</div>
        </div>
    </div>
    <div id="weather2" class="weather-container">
        <div class="w33 centering">
            <div class="ma">hoge</div>
        </div>
        <div class="w33 centering">
            <img class="w100 ma" src="hoge.png" alt="心は晴れてます">
        </div>
        <div class="w33 centering">
            <div class="ma" style="color: #c5c5c5;">hoge</div>
        </div>
    </div>
</div>
weather.css
.w100{width: 100%;}
.w33{width: 33%;}
.ma{margin: auto;}
#weather-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 440px;
    width: 100%;
    margin: auto;
    margin-bottom: 15px;
}
.weather-container{
    background-color: white;
    text-align: center;
    max-width: 212px;
    height: 80px;
    width: 100%;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
}
.centering{
    display: flex;
    align-items: center;
}

weather-containerにitemが3個あるため各itemのwidthを33%に設定。
もしも4個であれば25%、5個であれば20%。
慣れるまでは難しいかもしれないが、上からweather-wrapper、weather-container、centeringと3つ連続でflexを使う必要があり、justify-content: space-between、align-items: centerを使うことできれいに揃えることができる。
なお説明は省くが、この場合text-align: centerは使っても効かないのでmargin: autoとなる。