エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【CSS】あれもこれも真ん中にしたい!要素を中心に配置するCSSテクニック | panmimi design
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【CSS】あれもこれも真ん中にしたい!要素を中心に配置するCSSテクニック | panmimi design
スタイルシートで要素を垂直・水平中心に配置する方法はたくさんあります。要素のサイズがわかっている... スタイルシートで要素を垂直・水平中心に配置する方法はたくさんあります。要素のサイズがわかっているか、わかっていないかでもかわってきますね。 今回は「これは使いそうだなー」と思った方法をご紹介します。 高さ・幅のわからないテキストを中心に配置する! テキストの高さ・幅はフォントサイズや文章の長さで変わるので、調べないとわからないですよね。 サイズがわからなくても垂直・水平にセンタリングする方法をご紹介します。 テキストを垂直にセンタリング positionをrelative(相対配置)にして親要素(ここでは.gray_box)の上から50%下に配置。 そうするとテキストの上のラインが中心になるので、テキストの高さ半分を上に戻せばテキストが中心にきますね。CSS3から使えるtransformで縦の軸(Y軸)を-50%で指定すれば上にあがります。 CSS3の使えないブラウザには対応してい