文字を右下寄せにしたい時の備忘録になります。

テキスト

今回は2つのインライン要素(テキスト)を横に並べかつ、右下寄せにします。

HTML

    <div class="out_box">
        <div class="position flex-box">
            <span>ああああ</span> <span>いいいい</span>
        </div>
    </div>

CSS

.out_box {
    position: relative;
    height: 150px; 
    background-color: aqua;
}

.out_box .position {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: blueviolet;
}

.out_box .flex-box {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
}

結果

ああああいいいい

画像とテキスト

画像とテキストを横並びにしてみます。今回は “good_icon.png” というアイコンを使用します。

HTML

    <div class="out_box">
        <div class="position flex-box">
            <img src="good_icon.png"> <span>100</span>
        </div>
    </div>

CSS

先ほどとほとんど変わりないです。変更点は画像の大きさを指定したくらいです。

.out_box {
    position: relative;
    height: 150px; 
    background-color: aqua;
}

.out_box .position {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: blueviolet;
}

.out_box .flex-box {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
}

.out_box .flex-box img {
    height: 20px;
    width: 20px;
}

結果

100

最後に

特にありません。