親ブロックの下部にテキストを下揃えする方法

CSSで親ブロックの下部にテキストを下揃えする方法を紹介します。

以下のような、カラムブロックに段落テキストがあり、一番下の段落テキスト(下部右寄せテキスト)を下部右寄せにする形で紹介していきます。

完成サンプル

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

下部右寄せテキスト

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

下部右寄せテキスト

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

下部右寄せテキスト

CSS

以下のCSSをカスタマイズの追加CSS、もしくは子テーマでしたら子テーマのCSSに追加してください。

※数字の2remや15pxはお好きな数値に設定してください。

.position-relative {
		position:relative;
}
/* 下部テキストの上余白 */
.position-relative:after {
    content: "";
    display: block;
    padding-top: 2rem
}
/* 下部右寄せ */
.text-right-bottom{
    position: absolute;
    bottom: 15px;
    right: 15px;
    margin-bottom: 0;
}

ブロック配置

ブロックを配置

固定ページなどにブロックで、上記の「完成サンプル」のようにカラムブロックと段落テキストを入れてください。

高度な設定の追加 CSS クラス

カラムブロックの中のカラムアイテムを選択していただき、右のメニューの高度な設定→追加 CSS クラスへクラス名を position-relative と追加します。
※上記の完成サンプルの場合は、3カラムありますので3つそれぞれに追加してください。

次に下部右寄せにしたい段落テキストを選択していただき、右のメニューの高度な設定→追加 CSS クラスへクラス名を text-right-bottomと追加します。


以上で下部右寄せテキストになります。

コメントを残す

メールアドレスが公開されることはありません。