横並びのボックスの高さを揃えて、画像を下揃えにする

NO IMAGE

Bootstrapで左右幅を決め、左側にロゴ、右側にメニューや電話番号というような配置のヘッダーを作成することが少なくありません。

ヘッダー全体の高さを指定していなければ、左右のいずれかのボリューミーなほうのコンテンツによってヘッダー全体の高さが決まります。

このままだと、左右いずれか、高さの小さい方のコンテンツは上から配置(上揃え)されるのですが、下を揃えたいという場合も少なくありません。

ところが、多くの場合は、divタグで左右を分けますので、ボックス自体には高さがなく、こんな簡単な配置にも意外と手間取ったりします。

そこで

  1. Bootstrapで左右を2つのボックスに分割
  2. 左右それぞれのボックスの高さを同じにする
  3. ボックス内のアイテムを下配置(下揃え)にする

というスタイルの設定を今どきのflex属性でやってみます。

htmlは

cssは

 

Bootstrap - ブートストラップカテゴリの最新記事

↑上へまいりま〜す
%d人のブロガーが「いいね」をつけました。