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

テキスト

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

CSS

分かりやすいように高さと背景を指定しています。

.out_box {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 300px; 
    background-color: aqua;
}

HTML

分かりやすいようにテキストには背景色を指定しています。

        <div class="out_box">
            <span style="background-color: blue;">あああああ</span>
            <span style="background-color: brown;">いいいいい</span>
        </div>

結果

画像とテキスト

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

CSS

変わらないので割愛します。

HTML

        <div class="out_box">
            <img width="20" height="20" src="good_icon.png"> <span>100</span>
        </div>

結果

横に並びますが、文字の位置が画像に比べ少し高いですね。

画像とテキスト – 修正

画像の位置をずらし、テキストに合わせます。

CSS

以下のクラスを追加します。このクラスは画像に使用します。

.img_style {
    margin: 0 10px 4px 0;
}

HTML

画像にスタイルを当てました。

        <div class="out_box">
            <img width="20" height="20" src="good_icon.png" class="img_style"> <span>100</span>
        </div>