カラムの垂直位置を揃える - Bootstrapのチュートリアル

このレッスンではクラスを使ってカラムの 垂直位置を揃えてみたいと思います。 今開いているこのページなんですが row、行が３つあります。 そしてそれぞれにカラムが ３つあって そしてこのグレーの部分というのは row の高さになっています。 ですから row の高さに対してカラムの 高さというのが少し小さめなんですね。 この中で垂直方向に 位置揃えをしようということです。 そしてまずは row に対する クラスの設定です。 行に対してその中の カラムすべてを位置揃えする ということになるわけですけど、 では下からいきましょうか。 ３番目のカラム７・８・９です。 この３つのカラムが 入った行に対して 位置揃えは align という クラス名で始まっています。 そして items まずは end というふうにしますと 垂直方向下位置に揃えます。 今度は真ん中に移りまして row に対する設定ですね。 クラス row に対して 同様に align-items そして center を選択すると この行の高さの中で 真ん中位置に揃います。 ３行目が下位置ですね。 それから上位置に揃えると あうんですが これすでにデフォルトですので 変化はありませんけど クラスのご紹介をしておきます。 align の items、そして start です。 一番上に位置揃えするということで デフォルトですので動きません。 今ご紹介したのは 行に対する設定ですね。 ですから行の中のカラムすべてが その指定した位置に揃います。 もう１つ今度はカラムに対する 設定をご紹介します。 今度は行が１つだけで カラムはやはり３つあるんですけど このカラム１つ１つに対して クラスを設定することができます。 ではカラム３からいきますけれど カラム３、つまり col のクラスですね。 カラムのクラスに対して やはり align で始まるんですけど align-self となりまして end、これは下位置です。 それから次に align の self の center ですね。 これが中揃えになります。 そしてデフォルトは上なので 動きませんけど クラスのご紹介として aligh-self-start ですね。 動きませんけどこのように それぞれのカラムについて 垂直位置を揃えることができます。…