242
232

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Bootstrapで左・中央・右寄せする方法

Last updated at Posted at 2016-08-13

##text-alignを使う
テキストなどのインライン要素に対しての指定

	<p class="text-left">左寄せ</p>
    <p class="text-center">中央</p>
    <p class="text-right">右寄せ</p>

(実行結果)
スクリーンショット 2016-08-14 6.35.55.png

##floatを使う
ブロック要素に対しての指定

左寄せ

	<div class="pull-left">左寄せ</div>

(実行結果)
スクリーンショット 2016-08-14 6.37.59.png

中央寄せ

	<div class="center-block">中央</div>

(実行結果)
スクリーンショット 2016-08-14 6.38.55.png

右寄せ

	<div class="pull-right">右寄せ</div>

(実行結果)
スクリーンショット 2016-08-14 6.40.19.png

##オフセット・カラムを使って中央揃えを行う
グリットシステムでの指定

<div class="container">
    <div class="row">
       <div class="col-md-10 col-md-offset-1">col-md-10 col-md-offset-1</div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">col-md-8 col-md-offset-2</div>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">col-md-6 col-md-offset-3</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
    </div>
    <div class="row">
        <div class="col-md-2 col-md-offset-5">col-md-2 col-md-offset-5</div>
    </div>
</div>

(実行結果)
スクリーンショット 2016-08-14 6.45.02.png

divの位置を指定しているだけなので、div内テキストの表示位置を指定したい場合はtext-alignを使用すればよい

242
232
5

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
242
232

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?