上下の上/中央/下寄せのやり方【Bootstrap4】
Bootstrapで上とか下に寄せて表示するやり方
テーブルとかでセルが予想以上に縦長になった時に、
「なんか表示がダサい。上下中央寄せにしたい」
って時によく指定するやり方です
縦方向の寄せ方
テーブル・インライン
上寄せ
align-top
中央寄せ
align-middle
下寄せ
align-bottom
コード全文(テーブル)
<table>
<tr>
<td class="align-bottom">僕を下にしてー</td>
</tr>
</table>
コード全文(インライン)
spanタグみたいなインライン内での揃え方
<span class="align-top">上にしてー</span>
<span class="align-middle">中央にしてー</span>
<span class="align-bottom">下にしてー</span>
Flex
「align-◯◯を指定したけど、全然動かない!」
って時は、Flexを使うと大体の場合で解決できます
上寄せ
d-flex align-items-start
中央寄せ
d-flex align-items-center
下寄せ
d-flex align-items-end
コード全文
<div class="d-flex align-items-center">
ここの文字が上下中央になる!
</div>
ディスカッション
コメント一覧
まだ、コメントがありません
みんながLoadingしてる記事
新たにPostされた記事
: JS
Dropzone.jsで編集画面を作る(アップロード済みの画像を表示)
前回からの続きです Dropzone.jsを使って画像アップロードの編集画面を作 ...: Laravel
LaravelでDBテーブルをupdateした時に、同時に更新した値を取得する裏技[Laravel8]
通常Eloquentのsaveやupdateでは、実行時に更新した値の結果を返し ...: JS
忘れがちなJqueryのあれやこれ
Jqueryって何でこんなに忘れやすいのでしょうか 呪文にかかったくらい覚えられ ...: 資格
理系エンジニアの僕がTOEICで800点をとるためにした勉強
先日、TOEIC L&R テストで800点を超えました 今回は理系エンジ ...: Laravel
[Laravel8]npm run devが失敗する場合の解決法
Laravel8にJetstreamをインストールする際、npm run dev ...HashMap
Created by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
そのほか