Posted at

Bootstrap3で手軽に上下中央揃えを実現する

More than 3 years have passed since last update.


前提として


  • Slim

  • Sass

  • Compass

を使っています。古いIEでの細かいレイアウトなどは目をつぶっています。


Bootstrapで上下中央揃えできない..

BootstrapのGridは便利ですが、ちょっと凝ったレイアウトになると、途端に実装どうしようとなりがちですよね。

その1つが上下中央揃えだと思っています。

以下の様に書いても上下中央揃えならない!table-cell使う?と悩んでしまいがちです。

.row

.col-xs-6 // 真ん中にならない。。
.col-xs-6

そういう時は flexを使いましょう。

以下のコードを追加します。


_bootstrap_and_overrides.sass

.row

&--flex
+display-flex
> *
+align-self(center)

これだけで上下中央揃えが実現できます!


レスポンシブも対応したいんだけど?これだと縮めた時に回りこまなくない?

ごもっともですね。

以下のようにメディアクエリを使うmixinを登録して、指定の幅以下になったときはdisplay: blockにするようにしましょう。


_mixin.sass


// メディアクエリ
$bootstrap_bp_md: 1199px
$bootstrap_bp_sm: 991px
$bootstrap_bp_xs: 767px

=mq($bp)
@if $bp == md
@media screen and (max-width: $bootstrap_bp_md)
@content
@else if $bp == sm
@media screen and (max-width: $bootstrap_bp_sm)
@content
@else if $bp == xs
@media screen and (max-width: $bootstrap_bp_xs)
@content
@else
@media screen and (max-width: $bp)
@content



_bootstrap_and_overrides.sass

.row

&--flex
+display-flex
&--md
+mq(md)
display: block
&--sm
+mq(sm)
display: block
&--xs
+mq(xs)
display: block

実際には

.row.row--flex.row--flex--sm

のようにつかいます。

こんな感じで手軽に実装できました。(display: blockにしているところはflexでもっと綺麗にかけるような気がしています)


おわりに

Bootstrap4からはflexが実装されるみたいなので、上のようなコードは不要かもしれません。

とはいえ、しばらくBootstrap3なこともあり、わりかし重宝しています。かゆいところに手が届きます。

参考になれば幸いです。