【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

忙しい方に、

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

demoコードはこちら
http://kenjimorita.jp/sample/demo.html

今デスクトップで【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」のdemoをスマホで見たい方はこちら

今デスクトップで【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」のdemoをスマホで見たい方はこちら

今デスクトップで【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」のdemoをスマホで見たい方はこちら

・開発ツールを開いてファファファの文字列を増やしてください。増えても縦に対して中央、真ん中になります。
もしくはここいじって見てください

一応ここにもCSSのコード

div {
			height: 300px; 
			background: #e6e6e6;
		}
		span {
			position: relative;
			top: 50%;
			left: 50%;
			display: inline-block;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}

 

いやいやそうじゃない画面幅に対して真ん中にしたいんだの方

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

考え方は上の一緒です。

demoはこちら

今デスクトップで【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」のdemoをスマホで見たい方はこちら

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

もしくはここいじって見てください。

一応ここにもCSSのコード

body {
			position: relative;
			height: 100vh;
		}
		div {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			height: 300px;
			background: #e6e6e6;
		}
		span {
			position: relative;
			top: 50%;
			left: 50%;
			display: inline-block;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}

考え方
1.何に対して中央にしたいか??

2
→親要素に対して、子供を中央にしたいなら、1。その親に上記divのスタイルを当てる。
→画面に対して、ある要素を中央にしたいなら、2、bodyに対してスタイルを当てる。

3 中央にする要素にはposition。上下真ん中にして、ネガティブマージンの代わりに可変なので、transformを当てる。-webkit-はiOS用。
もし可変じゃないならその幅分/2のネガティブマージンをしてあげる。

※inline-blockは今回の文字列のように長さが動的になる場合必要。transformに対象となる値を知らせるため。

でわーーーー。

(Visited 1 times, 1 visits today)