.NET開発者のためのブログメディア
Bootstrapでのテキスト・ブロック要素・グリッド・flexなどの左寄せ・中央寄せ・右寄せの方法
- SE
- Bootstrapでのテキストなどの左寄せ・中央寄せ・右寄せを教えてください。
- PM
- テキストやブロック要素などの左寄せ・中央寄せ・右寄せの方法を説明しますので、一緒に見ていきましょう。
目次
Bootstrapでの左寄せ・中央寄せ・右寄せの方法とは?
今回は、Bootstrapでの左寄せ・中央寄せ・右寄せの方法について説明します。
ここでは、以下の左寄せ・中央寄せ・右寄せについて紹介します。
・テキスト
・ブロック要素
・グリッド
・flex
Bootstrapでの左寄せ・中央寄せ・右寄せの方法に興味のある方はぜひご覧ください。
テキスト
Bootstrapでは、text-alignで左寄せ・中央寄せ・右寄せができます。
1
2
3
|
<p class="text-left">text-left 左寄せ</p>
<p class="text-center">text-center 中央寄せ</p>
<p class="text-right">text-right 右寄せ</p>
|
See the Pen
bootstrap_align1 by kskumd (@kskumd)
on CodePen.
また、tableで左寄せ・中央寄せ・右寄せする場合には、tdの中にtext-alignを指定する必要があります。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<table class="table table-hover table-bordered">
<thead>
<tr>
<th><div class="text-left">text-left 左寄せ</div></th>
<th><div class="text-center">text-center 中央寄せ</div></th>
<th><div class="text-right">text-right 右寄せ</div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="text-left">text-left</div></td>
<td><div class="text-center">text-center</div></td>
<td><div class="text-right">text-right</div></td>
</tr>
<tr>
<td><div class="text-left">text-left</div></td>
<td><div class="text-center">text-center</div></td>
<td><div class="text-right">text-right</div></td>
</tr>
<tr>
<td><div class="text-left">text-left</div></td>
<td><div class="text-center">text-center</div></td>
<td><div class="text-right">text-right</div></td>
</tr>
</tbody>
</table>
|
See the Pen
bootstrap_align5 by kskumd (@kskumd)
on CodePen.
このようにBootstrapでは、text-alignで左寄せ・中央寄せ・右寄せができます。
ブロック要素
Bootstrapでは、ブロック要素の左寄せ・中央寄せ・右寄せができます。
1
2
3
|
<div class="float-left">float-left 左寄せ</div><br>
<div class="mx-auto" style="width: 200px;">mx-auto 中央寄せ</div>
<div class="float-right">float-right 右寄せ</div>
|
See the Pen
bootstrap_align2 by kskumd (@kskumd)
on CodePen.
このようにBootstrapでは、ブロック要素の左寄せ・中央寄せ・右寄せができます。
グリッド
Bootstrapでは、グリッドの左寄せ・中央寄せ・右寄せができます。
1
2
3
4
5
6
7
8
9
10
11
|
<div class="container-fluid">
<div class="row justify-content-start">
justify-content-start 左寄せ
</div>
<div class="row justify-content-center">
justify-content-center 中央寄せ
</div>
<div class="row justify-content-end">
justify-content-end 右寄せ
</div>
</div>
|
See the Pen
bootstrap_align3 by kskumd (@kskumd)
on CodePen.
このようにBootstrapでは、グリッドの左寄せ・中央寄せ・右寄せができます。
flex
Bootstrapでは、flexの左寄せ・中央寄せ・右寄せができます。
1
2
3
4
5
6
7
8
9
10
11
|
<div class="d-flex justify-content-start">
<div style="background-color:lightblue;padding:10px;">justify-content-start 左寄せ</div>
</div><br>
<div class="d-flex justify-content-center">
<div style="background-color:lightblue;padding:10px;">justify-content-center 中央寄せ</div>
</div><br>
<div class="d-flex justify-content-end">
<div style="background-color:lightblue;padding:10px;">justify-content-end 右寄せ</div>
</div>
|
See the Pen
bootstrap_align4 by kskumd (@kskumd)
on CodePen.
このようにBootstrapでは、flexの左寄せ・中央寄せ・右寄せができます。
- SE
- Bootstrapでの左寄せ・中央寄せ・右寄せの方法についてよく理解できました。
- PM
- 左寄せ・中央寄せ・右寄せの方法が理解できたら、実際にソースコードを書いてみましょう。
まとめ
Bootstrapでの左寄せ・中央寄せ・右寄せの方法について説明しました。
ここでは、以下の左寄せ・中央寄せ・右寄せについて紹介しました。
・テキスト
・ブロック要素
・グリッド
・flex
ぜひご自身でソースコードを書いて、理解を深めてください。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万~30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万~30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万~67万円東京都文京区(後楽園駅)