LoginSignup
2
4

More than 5 years have passed since last update.

Semantic UIでボタンを中央寄せにしました

Last updated at Posted at 2017-01-31

SemanticUIでUIを中央寄せをどうやるのかわかりませんでた。

ボタン2つを中央寄せにしたいケース。

<div class="ui grid">
  <div class="eight wide column">
    <a class="ui button" href="#">東京都</a>
  </div>
  <div class="eight wide column">
    <a class="ui button" href="#">神奈川県</a>
  </div>
</div>

中央寄せのクラスを足す

中央寄せのクラスは、center alignedのようです。

<div class="ui center aligned grid">
  <div class="eight wide column">
    <a class="ui button" href="#">東京都</a>
  </div>
  <div class="eight wide column">
    <a class="ui button" href="#">神奈川県</a>
  </div>
</div>

center alignedじゃなくてcenteredでもいいみたいです。まだ試していませんが。

つまり右寄せなら

おまけですが、 right aligned で右寄せということになりますね。

確認

ちゃんと中央寄せされていました😂

デモはこちらです。

参考

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4