サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
猫
clue-design.com
上下中央や上寄せ、下寄せに配置するためのクラスも用意されています。 flexboxを利用するため、それぞれ2つのクラスを指定すればOKです。 1. 上下中央寄せ 「d-flex」と「align-items-center」を指定します。
良くあるデザインで丸の中に数字や文字が入っているものがありますよね。 画像にしてしまうのも良いですが、汎用性も考えて出来ればCSSでやってしまいたいですね。 中の文字や大きさも自由に変更できるので、後々メンテナンスしやすくもなります。 方法としては、divで正円を作ってその中に数字や文字を入れるイメージです。 簡単なので、誰にでもできますよ! サンプルはこちらです。 1. 丸、正円の中に数字・文字を書く(CSS) まずはCSSです。
Bootstrap4では、ブロック要素の左寄せ・右寄せ・中央寄せができるクラスが用意されています。 そのクラスを追加することで、ブロック要素を寄せることができます。 サンプルも作りました。
このページを最初にブックマークしてみませんか?
『clue-design.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く